@progress/kendo-react-inputs 10.2.0-develop.6 → 10.2.0-develop.8

package/colors/ColorPicker.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ze=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),Le=require("../package-metadata.js"),Ne=require("./Picker.js"),xe=require("./ColorGradient.js"),Z=require("./ColorPalette.js"),L=require("./FlatColorPicker.js"),qe=require("@progress/kendo-react-buttons"),Ve=require("@progress/kendo-svg-icons"),d=require("../messages/index.js"),He=require("@progress/kendo-react-intl"),Me=require("../common/AdaptiveMode.js"),We=require("@progress/kendo-react-layout");function Ue(f){const S=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const w in f)if(w!=="default"){const r=Object.getOwnPropertyDescriptor(f,w);Object.defineProperty(S,w,r.get?r:{enumerable:!0,get:()=>f[w]})}}return S.default=f,Object.freeze(S)}const t=Ue(ze),je={opacity:!0},Ge={palette:Z.DEFAULT_PRESET,tileSize:Z.DEFAULT_TILE_SIZE},$=f=>f!==void 0,fe=n.createPropsContext(),J=t.forwardRef((f,S)=>{var ce,ie;const w=!n.validatePackage(Le.packageMetadata,{component:"ColorPicker"}),r=n.usePropsContext(fe,f),_=He.useLocalization(),Q=n.useAdaptiveModeContext(),{size:p=E.size,rounded:N=E.rounded,fillMode:I=E.fillMode,gradientSettings:P=E.gradientSettings,paletteSettings:h=E.paletteSettings,flatColorPickerSettings:T,view:g=r.views?void 0:E.view,views:s=g?void 0:E.views,activeView:X,popupSettings:m,valid:ge,disabled:x,tabIndex:ve,icon:q,svgIcon:V,iconClassName:F,onChange:H,onFocus:M,onBlur:W,onActiveColorClick:U,className:ke,adaptive:me,adaptiveTitle:Y=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle])}=r,u=t.useRef(null),R=t.useRef(null),B=t.useRef(null),k=t.useRef(null),y=t.useRef(void 0),Ce=t.useRef(null),[be,ee]=t.useState(!1),[Ee,we]=t.useState(r.defaultValue),[Pe,ye]=t.useState(!1),[O,Se]=t.useState(),j=$(r.value),C=$(r.open),c=j?r.value:Ee,b=C?r.open:Pe,te=t.useRef(c),ne=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(S,()=>({element:u.current,actionElement:Ce.current,value:c,focus:ne}),[c,ne]);const _e=!!(O&&Q&&O<=Q.medium&&me);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Oe.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const l=t.useCallback((e,i)=>{C||(!e&&!i&&u&&u.current&&u.current.focus(),ye(e))},[C]),ae=t.useMemo(()=>new n.Navigation({root:u,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,i,a)=>{l(!1)},Enter:(e,i,a)=>{!C&&e===u.current&&(a.preventDefault(),a.stopPropagation(),l(!0))},ArrowDown:(e,i,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),l(!0))},ArrowUp:(e,i,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),l(!1))},Tab:(e,i,a)=>{var A,se,ue;if(n.getActiveElement(document)!==u.current){const de=(A=B.current)==null?void 0:A.wrapperRef.current,z=(se=R.current)==null?void 0:se.wrapperRef.current,pe=(ue=k.current)==null?void 0:ue.element;g==="palette"&&de?n.keepFocusInContainer(a,de):g==="gradient"&&z?n.keepFocusInContainer(a,z):g==="combo"&&z?n.keepFocusInContainer(a,z.parentElement):s&&pe&&n.keepFocusInContainer(a,pe)}}}}}),[l,C]),he=t.useCallback(ae.triggerKeyboardEvent.bind(ae),[]),Te=t.useCallback(()=>{C||(R.current&&R.current.wrapperRef.current?n.focusFirstFocusableChild(R.current.wrapperRef.current):B.current?B.current.focus():k.current&&k.current.element&&n.focusFirstFocusableChild(k.current.element))},[C]),D=e=>te.current=e,re=t.useCallback(e=>{const i={value:te.current,nativeEvent:e.nativeEvent,syntheticEvent:e};v(i),l(!b,!0)},[b]),G=t.useCallback(()=>{l(!1,!0)},[l]),Re=t.useCallback(e=>{U&&U.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:c,target:{element:u.current,value:c}})},[U,c]),Ae=t.useCallback(e=>{y.current?(clearTimeout(y.current),y.current=void 0):ee(!0),M&&M.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[M]),Ie=t.useCallback(()=>{l(!1,!0),ee(!1),y.current=void 0},[]),Fe=t.useCallback(e=>{clearTimeout(y.current),y.current=window.setTimeout(Ie),W&&W.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[W]),v=t.useCallback((e,i)=>{var A;const a=i?e.rgbaValue||"":(A=e.value)!=null?A:"";j||we(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),l(!1)},[j,H]),oe=t.useCallback(e=>v(e,!0),[$,v]),K=t.useCallback(e=>t.createElement(t.Fragment,null,(g==="combo"||g==="gradient")&&t.createElement(xe.ColorGradient,{...P,_adaptive:e,ref:R,isInsidePopup:!0,size:e?"large":p,fillMode:I,value:c,onChange:v}),(g==="combo"||g==="palette")&&t.createElement(Z.ColorPalette,{...h,ref:B,size:e?"large":p,value:c,onChange:oe}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["gradient","palette"],activeView:X,setOpen:l,showButtons:!e,value:c,onChange:v,setAdaptiveModeValue:D}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["palette","gradient"],setOpen:l,showButtons:!e,value:c,onChange:v,setAdaptiveModeValue:D}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(L.FlatColorPicker,{...T,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["gradient"],showButtons:!e,setOpen:l,value:c,onChange:v,setAdaptiveModeValue:D}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["palette"],showButtons:!e,setOpen:l,value:c,onChange:v,setAdaptiveModeValue:D}),w&&t.createElement(n.WatermarkOverlay,null)),[X,I,T,P,v,oe,h,l,p,c,g,s]),Be=t.useCallback(()=>{var i;const e={animation:!!((i=m==null?void 0:m.animate)==null||i),title:Y,expand:b,onClose:G,windowWidth:O,footer:{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:G,applyText:_.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:re}};return t.createElement(Me.AdaptiveMode,{...e},t.createElement(We.ActionSheetContent,null,K(!0)))},[m==null?void 0:m.animate,Y,b,G,O,_,re,K]),Oe=t.useCallback(e=>{for(const i of e)Se(i.target.clientWidth)},[]),le=n.useDir(u,r.dir),De=ge!==!1;return t.createElement("span",{id:r.id,role:"combobox","aria-label":r.ariaLabel,"aria-labelledby":r.ariaLabelledBy,"aria-describedby":r.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":b,"aria-controls":`k-colorpicker-popup-${(ce=r.id)!=null?ce:0}`,"aria-disabled":x?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-picker-${I}`]:I,[`k-rounded-${n.kendoThemeMaps.roundedMap[N]||N}`]:N,"k-invalid":!De,"k-disabled":x,"k-focus":be,className:ke}),ref:u,tabIndex:n.getTabIndex(ve,x),title:r.title,onKeyDown:he,onFocus:Ae,onBlur:Fe,dir:le},t.createElement(Ne.Picker,{dir:le,open:b,onOpen:Te,popupAnchor:u.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(ie=r.id)!=null?ie:0}`,...m},input:t.createElement("span",{onClick:Re,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!c,"k-icon-color-preview":q||V||F})},F&&t.createElement("span",{className:n.classNames("k-color-preview-icon",F)}),!F&&(q||V)&&t.createElement(n.IconWrap,{name:q,icon:V}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:c}}))),button:t.createElement(qe.Button,{tabIndex:-1,type:"button",onClick:()=>l(!b),className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:Ve.caretAltDownIcon,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:K(!1),_mobileMode:_e,_actionSheet:Be()}))});J.propTypes={value:o.string,defaultValue:o.string,disabled:o.bool,view:o.oneOf(["gradient","palette","combo"]),views:o.arrayOf(o.oneOf(["gradient","palette"])),dir:o.string,id:o.string,icon:o.string,svgIcon:n.svgIconPropType,ariaLabelledBy:o.string,ariaDescribedBy:o.string,size:o.oneOf([null,"small","medium","large"]),rounded:o.oneOf([null,"small","medium","large","full"]),fillMode:o.oneOf([null,"solid","flat","outline"]),className:o.string,adaptive:o.bool,adaptiveTitle:o.string};const E={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",views:["gradient","palette"],gradientSettings:je,paletteSettings:Ge};J.displayName="KendoColorPicker";exports.ColorPicker=J;exports.ColorPickerPropsContext=fe;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ze=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),Le=require("../package-metadata.js"),Ne=require("./Picker.js"),xe=require("./ColorGradient.js"),Z=require("./ColorPalette.js"),L=require("./FlatColorPicker.js"),qe=require("@progress/kendo-react-buttons"),Ve=require("@progress/kendo-svg-icons"),d=require("../messages/index.js"),He=require("@progress/kendo-react-intl"),Me=require("../common/AdaptiveMode.js"),We=require("@progress/kendo-react-layout");function Ue(f){const S=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(f){for(const w in f)if(w!=="default"){const r=Object.getOwnPropertyDescriptor(f,w);Object.defineProperty(S,w,r.get?r:{enumerable:!0,get:()=>f[w]})}}return S.default=f,Object.freeze(S)}const t=Ue(ze),je={opacity:!0},Ge={palette:Z.DEFAULT_PRESET,tileSize:Z.DEFAULT_TILE_SIZE},$=f=>f!==void 0,fe=n.createPropsContext(),J=t.forwardRef((f,S)=>{var ie,ce;const w=!n.validatePackage(Le.packageMetadata,{component:"ColorPicker"}),r=n.usePropsContext(fe,f),_=He.useLocalization(),Q=n.useAdaptiveModeContext(),{size:p=E.size,rounded:N=E.rounded,fillMode:I=E.fillMode,gradientSettings:P=E.gradientSettings,paletteSettings:h=E.paletteSettings,flatColorPickerSettings:T,view:g=r.views?void 0:E.view,views:s=g?void 0:E.views,activeView:X,popupSettings:m,valid:ge,disabled:x,tabIndex:ve,icon:q,svgIcon:V,iconClassName:F,onChange:H,onFocus:M,onBlur:W,onActiveColorClick:U,className:ke,adaptive:me,adaptiveTitle:Y=_.toLanguageString(d.colorPickerAdaptiveTitle,d.messages[d.colorPickerAdaptiveTitle])}=r,u=t.useRef(null),R=t.useRef(null),B=t.useRef(null),k=t.useRef(null),y=t.useRef(void 0),Ce=t.useRef(null),[be,ee]=t.useState(!1),[Ee,we]=t.useState(r.defaultValue||void 0),[Pe,ye]=t.useState(!1),[O,Se]=t.useState(),j=$(r.value),C=$(r.open),i=j?r.value:Ee,b=C?r.open:Pe,te=t.useRef(i),ne=t.useCallback(()=>{u.current&&u.current.focus()},[]);t.useImperativeHandle(S,()=>({element:u.current,actionElement:Ce.current,value:i,focus:ne}),[i,ne]);const _e=!!(O&&Q&&O<=Q.medium&&me);t.useEffect(()=>{const e=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(Oe.bind(void 0));return document!=null&&document.body&&e&&e.observe(document.body),()=>{document!=null&&document.body&&e&&e.disconnect()}},[]);const l=t.useCallback((e,c)=>{C||(!e&&!c&&u&&u.current&&u.current.focus(),ye(e))},[C]),ae=t.useMemo(()=>new n.Navigation({root:u,selectors:[".k-colorpicker",".k-color-picker-popup"],tabIndex:0,keyboardEvents:{keydown:{Escape:(e,c,a)=>{l(!1)},Enter:(e,c,a)=>{!C&&e===u.current&&(a.preventDefault(),a.stopPropagation(),l(!0))},ArrowDown:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),l(!0))},ArrowUp:(e,c,a)=>{a.altKey&&(a.preventDefault(),a.stopPropagation(),l(!1))},Tab:(e,c,a)=>{var A,se,ue;if(n.getActiveElement(document)!==u.current){const de=(A=B.current)==null?void 0:A.wrapperRef.current,z=(se=R.current)==null?void 0:se.wrapperRef.current,pe=(ue=k.current)==null?void 0:ue.element;g==="palette"&&de?n.keepFocusInContainer(a,de):g==="gradient"&&z?n.keepFocusInContainer(a,z):g==="combo"&&z?n.keepFocusInContainer(a,z.parentElement):s&&pe&&n.keepFocusInContainer(a,pe)}}}}}),[l,C]),he=t.useCallback(ae.triggerKeyboardEvent.bind(ae),[]),Te=t.useCallback(()=>{C||(R.current&&R.current.wrapperRef.current?n.focusFirstFocusableChild(R.current.wrapperRef.current):B.current?B.current.focus():k.current&&k.current.element&&n.focusFirstFocusableChild(k.current.element))},[C]),D=e=>te.current=e,re=t.useCallback(e=>{const c={value:te.current,nativeEvent:e.nativeEvent,syntheticEvent:e};v(c),l(!b,!0)},[b]),G=t.useCallback(()=>{l(!1,!0)},[l]),Re=t.useCallback(e=>{U&&U.call(void 0,{syntheticEvent:e,nativeEvent:e.nativeEvent,value:i,target:{element:u.current,value:i}})},[U,i]),Ae=t.useCallback(e=>{y.current?(clearTimeout(y.current),y.current=void 0):ee(!0),M&&M.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[M]),Ie=t.useCallback(()=>{l(!1,!0),ee(!1),y.current=void 0},[]),Fe=t.useCallback(e=>{clearTimeout(y.current),y.current=window.setTimeout(Ie),W&&W.call(void 0,{nativeEvent:e.nativeEvent,syntheticEvent:e})},[W]),v=t.useCallback((e,c)=>{var A;const a=c?e.rgbaValue||"":(A=e.value)!=null?A:"";j||we(a),H&&H.call(void 0,{value:a,nativeEvent:e.nativeEvent,syntheticEvent:e.syntheticEvent,target:{element:u.current,value:a}}),l(!1)},[j,H]),oe=t.useCallback(e=>v(e,!0),[$,v]),K=t.useCallback(e=>t.createElement(t.Fragment,null,(g==="combo"||g==="gradient")&&t.createElement(xe.ColorGradient,{...P,_adaptive:e,ref:R,isInsidePopup:!0,size:e?"large":p,fillMode:I,value:i,onChange:v}),(g==="combo"||g==="palette")&&t.createElement(Z.ColorPalette,{...h,ref:B,size:e?"large":p,value:i,onChange:oe}),s&&s[0]==="gradient"&&s[1]==="palette"&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["gradient","palette"],activeView:X,setOpen:l,showButtons:!e,value:i,onChange:v,setAdaptiveModeValue:D}),s&&s[0]==="palette"&&s[1]==="gradient"&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["palette","gradient"],setOpen:l,showButtons:!e,value:i,onChange:v,setAdaptiveModeValue:D}),s&&s.includes("gradient")&&!s.includes("palette")&&t.createElement(L.FlatColorPicker,{...T,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["gradient"],showButtons:!e,setOpen:l,value:i,onChange:v,setAdaptiveModeValue:D}),s&&s.includes("palette")&&!s.includes("gradient")&&t.createElement(L.FlatColorPicker,{...T,_paletteSettings:h,_gradientSettings:{_adaptive:e,...P},ref:k,size:e?"large":p,views:["palette"],showButtons:!e,setOpen:l,value:i,onChange:v,setAdaptiveModeValue:D}),w&&t.createElement(n.WatermarkOverlay,null)),[X,I,T,P,v,oe,h,l,p,i,g,s]),Be=t.useCallback(()=>{var c;const e={animation:!!((c=m==null?void 0:m.animate)==null||c),title:Y,expand:b,onClose:G,windowWidth:O,footer:{cancelText:_.toLanguageString(d.flatColorPickerCancelBtn,d.messages[d.flatColorPickerCancelBtn]),onCancel:G,applyText:_.toLanguageString(d.flatColorPickerApplyBtn,d.messages[d.flatColorPickerApplyBtn]),onApply:re}};return t.createElement(Me.AdaptiveMode,{...e},t.createElement(We.ActionSheetContent,null,K(!0)))},[m==null?void 0:m.animate,Y,b,G,O,_,re,K]),Oe=t.useCallback(e=>{for(const c of e)Se(c.target.clientWidth)},[]),le=n.useDir(u,r.dir),De=ge!==!1;return t.createElement("span",{id:r.id,role:"combobox","aria-label":r.ariaLabel,"aria-labelledby":r.ariaLabelledBy,"aria-describedby":r.ariaDescribedBy,"aria-haspopup":"dialog","aria-expanded":b,"aria-controls":`k-colorpicker-popup-${(ie=r.id)!=null?ie:0}`,"aria-disabled":x?"true":void 0,className:n.classNames("k-colorpicker","k-picker","k-icon-picker",{[`k-picker-${n.kendoThemeMaps.sizeMap[p]||p}`]:p,[`k-picker-${I}`]:I,[`k-rounded-${n.kendoThemeMaps.roundedMap[N]||N}`]:N,"k-invalid":!De,"k-disabled":x,"k-focus":be,className:ke}),ref:u,tabIndex:n.getTabIndex(ve,x),title:r.title,onKeyDown:he,onFocus:Ae,onBlur:Fe,dir:le},t.createElement(Ne.Picker,{dir:le,open:b,onOpen:Te,popupAnchor:u.current||void 0,popupSettings:{id:`k-colorpicker-popup-${(ce=r.id)!=null?ce:0}`,...m},input:t.createElement("span",{onClick:Re,className:"k-input-inner"},t.createElement("span",{className:n.classNames("k-value-icon","k-color-preview",{"k-no-color":!i,"k-icon-color-preview":q||V||F})},F&&t.createElement("span",{className:n.classNames("k-color-preview-icon",F)}),!F&&(q||V)&&t.createElement(n.IconWrap,{name:q,icon:V}),t.createElement("span",{className:"k-color-preview-mask",style:{backgroundColor:i}}))),button:t.createElement(qe.Button,{tabIndex:-1,type:"button",onClick:()=>l(!b),className:"k-input-button",rounded:null,icon:"caret-alt-down",svgIcon:Ve.caretAltDownIcon,"aria-label":_.toLanguageString(d.colorPickerDropdownButtonAriaLabel,d.messages[d.colorPickerDropdownButtonAriaLabel])}),content:K(!1),_mobileMode:_e,_actionSheet:Be()}))});J.propTypes={value:o.string,defaultValue:o.string,disabled:o.bool,view:o.oneOf(["gradient","palette","combo"]),views:o.arrayOf(o.oneOf(["gradient","palette"])),dir:o.string,id:o.string,icon:o.string,svgIcon:n.svgIconPropType,ariaLabelledBy:o.string,ariaDescribedBy:o.string,size:o.oneOf([null,"small","medium","large"]),rounded:o.oneOf([null,"small","medium","large","full"]),fillMode:o.oneOf([null,"solid","flat","outline"]),className:o.string,adaptive:o.bool,adaptiveTitle:o.string};const E={size:"medium",rounded:"medium",fillMode:"solid",view:"palette",views:["gradient","palette"],gradientSettings:je,paletteSettings:Ge};J.displayName="KendoColorPicker";exports.ColorPicker=J;exports.ColorPickerPropsContext=fe;

package/colors/ColorPicker.mjs

@@ -50,7 +50,7 @@ const st = {
     className: we,
     adaptive: ye,
     adaptiveTitle: J = b.toLanguageString(pe, D[pe])
-  } = o, s = t.useRef(null), S = t.useRef(null), T = t.useRef(null), f = t.useRef(null), E = t.useRef(void 0), Se = t.useRef(null), [he, Q] = t.useState(!1), [_e, Pe] = t.useState(o.defaultValue), [Te, Re] = t.useState(!1), [R, Ae] = t.useState(), K = Z(o.value), v = Z(o.open), l = K ? o.value : _e, g = v ? o.open : Te, X = t.useRef(l), Y = t.useCallback(() => {
+  } = o, s = t.useRef(null), S = t.useRef(null), T = t.useRef(null), f = t.useRef(null), E = t.useRef(void 0), Se = t.useRef(null), [he, Q] = t.useState(!1), [_e, Pe] = t.useState(o.defaultValue || void 0), [Te, Re] = t.useState(!1), [R, Ae] = t.useState(), K = Z(o.value), v = Z(o.open), l = K ? o.value : _e, g = v ? o.open : Te, X = t.useRef(l), Y = t.useCallback(() => {
     s.current && s.current.focus();
   }, []);
   t.useImperativeHandle(