@progress/kendo-react-dateinputs 13.4.0-develop.3 → 13.4.0-develop.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dateinput/DateInput.d.ts +3 -2
- package/dateinput/DateInput.js +1 -1
- package/dateinput/DateInput.mjs +1 -1
- package/datepicker/DatePicker.d.ts +3 -2
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +1 -1
- package/datetimepicker/DateTimePicker.d.ts +4 -3
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +1 -1
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +8 -8
- package/timepicker/TimePicker.d.ts +4 -3
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +1 -1
package/dateinput/DateInput.d.ts
CHANGED
|
@@ -96,6 +96,7 @@ export interface DateInputProps<T extends DateInputHandle = any> extends FormCom
|
|
|
96
96
|
* - medium
|
|
97
97
|
* - large
|
|
98
98
|
* - full
|
|
99
|
+
* - none
|
|
99
100
|
*
|
|
100
101
|
* @default undefined (theme-controlled)
|
|
101
102
|
*
|
|
@@ -104,7 +105,7 @@ export interface DateInputProps<T extends DateInputHandle = any> extends FormCom
|
|
|
104
105
|
* <DateInput rounded="full" />
|
|
105
106
|
* ```
|
|
106
107
|
*/
|
|
107
|
-
rounded?: 'small' | 'medium' | 'large' | 'full';
|
|
108
|
+
rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
|
|
108
109
|
/**
|
|
109
110
|
* Control the `fillMode` (background) of the DateInput.
|
|
110
111
|
*
|
|
@@ -177,7 +178,7 @@ export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps<a
|
|
|
177
178
|
export declare const dateInputDefaultProps: {
|
|
178
179
|
format: string;
|
|
179
180
|
size: "small" | "medium" | "large" | undefined;
|
|
180
|
-
rounded: "small" | "medium" | "large" | "full" | undefined;
|
|
181
|
+
rounded: "small" | "none" | "medium" | "large" | "full" | undefined;
|
|
181
182
|
fillMode: "flat" | "solid" | "outline" | undefined;
|
|
182
183
|
formatPlaceholder: DateInputFormatPlaceholder;
|
|
183
184
|
spinners: boolean;
|
package/dateinput/DateInput.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ve=require("react"),e=require("prop-types"),x=require("@progress/kendo-date-math"),te=require("@progress/kendo-react-buttons"),ne=require("@progress/kendo-svg-icons"),ae=require("@progress/kendo-react-intl"),o=require("@progress/kendo-react-common"),ke=require("@progress/kendo-react-labels"),pe=require("@progress/kendo-dateinputs-common"),_=require("./utils.js"),u=require("../utils.js"),c=require("../messages/index.js"),Ae=require("../timepicker/utils.js"),_e=require("../common/ClearButton.js"),Be=require("./dateInputIntl.js");function Fe(t){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const m in t)if(m!=="default"){const C=Object.getOwnPropertyDescriptor(t,m);Object.defineProperty(b,m,C.get?C:{enumerable:!0,get:()=>t[m]})}}return b.default=t,Object.freeze(b)}const a=Fe(Ve),je="Please enter a valid value!",F=a.forwardRef((t,b)=>{var ee;const m=o.useId(t.id),C=ae.useInternationalization(),E=ae.useLocalization(),re=o.useUnstyled(),j=o.usePropsContext(B,t).unstyled||re,{format:P=i.format,size:le=i.size,rounded:ie=i.rounded,fillMode:ue=i.fillMode,formatPlaceholder:oe=i.formatPlaceholder,spinners:se=i.spinners,disabled:w=i.disabled,min:ce=i.min,max:de=i.max,minTime:fe=i.minTime,maxTime:me=i.maxTime,validityStyles:ge=i.validityStyles,validationMessage:H=i.validationMessage,placeholder:y=i.placeholder,enableMouseWheel:ve=i.enableMouseWheel,autoCorrectParts:be=i.autoCorrectParts,autoSwitchParts:ye=i.autoSwitchParts,allowCaretMode:he=i.allowCaretMode,twoDigitYearMax:Ie=i.twoDigitYearMax,ariaHasPopup:Oe=i.ariaHasPopup,autoFocus:h=i.autoFocus}=o.usePropsContext(B,t),g=()=>S.current!==void 0?S.current:r.current&&r.current.value,z=()=>{const n=r.current&&r.current.currentText||"",l=g();return y!=null&&!qe.focused&&!l?y:n},U=()=>t.required!==void 0?t.required:!1,R=()=>{const n=g()||t.value,l=ce,D=de,k=_.isInRange(n,l,D)&&Ae.isInTimeRange(n,fe,me),p=H!==void 0,A=(!U()||n!=null)&&k,Ne=t.valid!==void 0?t.valid:A;return{customError:p,rangeOverflow:n&&D.getTime()<n.getTime()||!1,rangeUnderflow:n&&n.getTime()<l.getTime()||!1,valid:Ne,valueMissing:n===null}},De=()=>{s.current&&s.current.focus()},W=()=>new Be.DateInputIntl(C),T=()=>{const n=g();return{format:P,steps:t.steps,formatPlaceholder:oe,placeholder:y,selectPreviousSegmentOnBackspace:!0,value:t.value||n,intlService:W(),autoFill:t.autoFill!==void 0?t.autoFill:!1,enableMouseWheel:ve,autoCorrectParts:be,autoSwitchParts:ye,autoSwitchKeys:t.autoSwitchKeys||[],twoDigitYearMax:Ie,allowCaretMode:he}},xe=n=>{d.current&&d.current.classList.add("k-focus"),N({focused:!0}),h&&Z(!0)},Ce=n=>{d.current&&d.current.classList.remove("k-focus"),N({focused:!1})},Ee=(n,l)=>typeof n!=typeof l?!0:typeof n=="string"&&typeof l=="string"?n!==l:typeof n=="object"&&typeof l=="object"?JSON.stringify(n)!==JSON.stringify(l):!1,we=n=>typeof n=="string"?n:{inputFormat:n,displayFormat:n},K=n=>{S.current=g(),Le(),v.current=n,S.current=void 0},J=n=>{t.onChange&&t.onChange(n)},Y=n=>{o.getActiveElement(document)===s.current&&n.preventDefault()},Te=()=>new pe.DateInput(s.current,{...T(),format:we(T().format),events:{focus:xe,blur:Ce,valueChange:K,click:J}}),X=()=>{s.current&&s.current.setCustomValidity&&s.current.setCustomValidity(R().valid?"":H||i.validationMessage)},Z=a.useCallback(n=>{var l;if(s.current&&h&&n){const D=(r==null?void 0:r.current).currentText,k=(r==null?void 0:r.current).currentText.search(/[^a-zA-Z]/),p=D[k],A=D.split(p)[0].length;d.current&&d.current.classList.add("k-focus"),(l=r==null?void 0:r.current)==null||l.selectNearestSegment(A)}},[h]),Me=n=>{!s.current||!r.current||K(n)},Se=n=>{n.preventDefault();const l=o.getActiveElement(document);s.current&&l!==s.current&&s.current.focus({preventScroll:!0})},f=n=>{const l=g();v.current&&t.onChange&&!x.isEqual(v.current.oldValue,l)&&t.onChange.call(void 0,{syntheticEvent:n,nativeEvent:v.current.event,value:v.current.value,target:M.current}),v.current=null},Pe=n=>{var l;(l=r.current)==null||l.modifyDateSegmentValue(1),f(n)},Re=n=>{var l;(l=r.current)==null||l.modifyDateSegmentValue(-1),f(n)},M=a.useRef(null),s=a.useRef(null),d=a.useRef(null);a.useImperativeHandle(M,()=>({props:t,get options(){return T()},get text(){return z()},get element(){return s.current},get name(){return t.name},get value(){return g()},get validity(){return R()},focus:De,updateOnPaste:Me})),a.useImperativeHandle(b,()=>M.current);const r=a.useRef(null),q=a.useRef(null),L=a.useRef(!1),S=a.useRef(null),v=a.useRef(null),I=a.useRef(t),[qe,N]=a.useState({focused:!1}),[,Le]=a.useReducer(n=>n+1,0);a.useLayoutEffect(()=>{L.current||(r.current=Te(),q.current=r.current.dateObject,L.current=!0)},[]),a.useEffect(()=>(X(),L.current||d.current&&d.current.addEventListener("wheel",Y,{passive:!1}),h&&(N({focused:!0}),Z(!0)),()=>{d.current&&d.current.removeEventListener("wheel",Y)}),[]),a.useEffect(()=>{X(),r.current&&((Ee(I.current.format,P)||I.current.readonly!==t.readonly||JSON.stringify(I.current.steps)!==JSON.stringify(t.steps)||W().locale!==r.current.options.intlService.locale)&&r.current.setOptions(T(),!0),I.current.value!==t.value&&(q.current.getValue()!==null||t.value!==null)&&q.current.setValue(t.value),t.ariaExpanded!==void 0&&t.ariaExpanded&&(r.current.options.placeholder=null),t.ariaExpanded!==void 0&&!t.ariaExpanded&&(r.current.options.placeholder=y),r.current.refreshElementValue(),I.current={format:P,readonly:t.readonly,ariaExpanded:t.ariaExpanded,steps:t.steps,value:t.value})});const $=t.id||m+"-accessibility-id",O=j&&j.uDateInput,G=z(),V=!ge||R().valid;a.useImperativeHandle(t._ref,()=>M.current);const Q=a.createElement("span",{ref:n=>{d.current=n},style:t.label?void 0:{width:t.width},dir:t.dir,className:o.classNames(o.uDateInput.wrapper({c:O,size:le,fillMode:ue,rounded:ie,disabled:w,required:U(),invalid:!V}),t.className)},a.createElement("input",{ref:n=>{s.current=n},role:t.ariaRole||"textbox",readOnly:t.readonly,tabIndex:t.tabIndex||0,disabled:w,title:t.title!==void 0?t.title:G,type:"text",spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:h,className:o.classNames(o.uDateInput.inputInner({c:O})),id:$,value:G,"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledBy,"aria-describedby":t.ariaDescribedBy,"aria-haspopup":Oe,"aria-disabled":w,"aria-expanded":t.ariaExpanded,"aria-controls":t.ariaControls,"aria-required":t.required,"aria-invalid":!V,onKeyDown:f,onChange:f,onWheel:f,onInput:f,onClick:f,name:t.name,...t.inputAttributes}),t.children,t.clearButton&&t.value&&a.createElement(_e,{onClick:J,key:"clearbutton"}),se&&a.createElement("span",{className:o.classNames(o.uDateInput.inputSpinner({c:O})),onMouseDown:Se},a.createElement(te.Button,{tabIndex:-1,type:"button",className:o.classNames(o.uDateInput.spinnerIncrease({c:O})),icon:"caret-alt-up",svgIcon:ne.caretAltUpIcon,"aria-label":E.toLanguageString(c.increaseValue,c.messages[c.increaseValue]),title:E.toLanguageString(c.increaseValue,c.messages[c.increaseValue]),onClick:Pe}),a.createElement(te.Button,{tabIndex:-1,type:"button",className:o.classNames(o.uDateInput.spinnerDecrease({c:O})),icon:"caret-alt-down",svgIcon:ne.caretAltDownIcon,"aria-label":E.toLanguageString(c.decreaseValue,c.messages[c.decreaseValue]),title:E.toLanguageString(c.decreaseValue,c.messages[c.decreaseValue]),onClick:Re})));return t.label?a.createElement(ke.FloatingLabel,{label:t.label,editorId:$,editorValue:(ee=s.current)==null?void 0:ee.value,editorValid:V,editorDisabled:w,children:Q,style:{width:t.width}}):Q});F.propTypes={value:e.instanceOf(Date),format:e.oneOfType([u.nullable(e.string),e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([u.nullable(e.oneOf(["wide","narrow","short","formatPattern"])),e.shape({year:u.nullable(e.string),month:u.nullable(e.string),day:u.nullable(e.string),hour:u.nullable(e.string),minute:u.nullable(e.string),second:u.nullable(e.string)})]),width:e.oneOfType([e.string,e.number]),tabIndex:e.number,title:e.string,steps:e.shape({year:u.nullable(e.number),month:u.nullable(e.number),day:u.nullable(e.number),hour:u.nullable(e.number),minute:u.nullable(e.number),second:u.nullable(e.number)}),min:e.instanceOf(Date),max:e.instanceOf(Date),disabled:e.bool,spinners:e.bool,name:e.string,dir:e.string,label:e.node,id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,ariaRole:e.string,ariaHasPopup:e.oneOfType([e.bool,e.oneOf(["grid","dialog"])]),ariaExpanded:e.oneOfType([e.bool]),onChange:e.func,validationMessage:e.string,required:e.bool,valid:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object};const i={format:_.DEFAULT_FORMAT,size:void 0,rounded:void 0,fillMode:void 0,formatPlaceholder:_.DEFAULT_FORMAT_PLACEHOLDER,spinners:!1,disabled:!1,max:x.cloneDate(u.MAX_DATE),min:x.cloneDate(u.MIN_DATE),minTime:x.cloneDate(u.MIN_TIME),maxTime:x.cloneDate(u.MAX_TIME),validityStyles:!0,validationMessage:je,placeholder:null,enableMouseWheel:!0,autoCorrectParts:!0,autoSwitchParts:!0,allowCaretMode:!1,twoDigitYearMax:68,ariaHasPopup:"grid",autoFocus:!1},B=o.createPropsContext();F.displayName="KendoReactDateInput";exports.DateInput=F;exports.DateInputPropsContext=B;exports.dateInputDefaultProps=i;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ve=require("react"),e=require("prop-types"),x=require("@progress/kendo-date-math"),te=require("@progress/kendo-react-buttons"),ne=require("@progress/kendo-svg-icons"),ae=require("@progress/kendo-react-intl"),o=require("@progress/kendo-react-common"),ke=require("@progress/kendo-react-labels"),pe=require("@progress/kendo-dateinputs-common"),_=require("./utils.js"),u=require("../utils.js"),c=require("../messages/index.js"),Ae=require("../timepicker/utils.js"),_e=require("../common/ClearButton.js"),Be=require("./dateInputIntl.js");function Fe(t){const b=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const m in t)if(m!=="default"){const C=Object.getOwnPropertyDescriptor(t,m);Object.defineProperty(b,m,C.get?C:{enumerable:!0,get:()=>t[m]})}}return b.default=t,Object.freeze(b)}const a=Fe(Ve),je="Please enter a valid value!",F=a.forwardRef((t,b)=>{var ee;const m=o.useId(t.id),C=ae.useInternationalization(),E=ae.useLocalization(),re=o.useUnstyled(),j=o.usePropsContext(B,t).unstyled||re,{format:P=i.format,size:le=i.size,rounded:ie=i.rounded,fillMode:ue=i.fillMode,formatPlaceholder:oe=i.formatPlaceholder,spinners:se=i.spinners,disabled:w=i.disabled,min:ce=i.min,max:de=i.max,minTime:fe=i.minTime,maxTime:me=i.maxTime,validityStyles:ge=i.validityStyles,validationMessage:H=i.validationMessage,placeholder:y=i.placeholder,enableMouseWheel:ve=i.enableMouseWheel,autoCorrectParts:be=i.autoCorrectParts,autoSwitchParts:ye=i.autoSwitchParts,allowCaretMode:he=i.allowCaretMode,twoDigitYearMax:Ie=i.twoDigitYearMax,ariaHasPopup:Oe=i.ariaHasPopup,autoFocus:h=i.autoFocus}=o.usePropsContext(B,t),g=()=>S.current!==void 0?S.current:r.current&&r.current.value,z=()=>{const n=r.current&&r.current.currentText||"",l=g();return y!=null&&!qe.focused&&!l?y:n},U=()=>t.required!==void 0?t.required:!1,R=()=>{const n=g()||t.value,l=ce,D=de,k=_.isInRange(n,l,D)&&Ae.isInTimeRange(n,fe,me),p=H!==void 0,A=(!U()||n!=null)&&k,Ne=t.valid!==void 0?t.valid:A;return{customError:p,rangeOverflow:n&&D.getTime()<n.getTime()||!1,rangeUnderflow:n&&n.getTime()<l.getTime()||!1,valid:Ne,valueMissing:n===null}},De=()=>{s.current&&s.current.focus()},W=()=>new Be.DateInputIntl(C),T=()=>{const n=g();return{format:P,steps:t.steps,formatPlaceholder:oe,placeholder:y,selectPreviousSegmentOnBackspace:!0,value:t.value||n,intlService:W(),autoFill:t.autoFill!==void 0?t.autoFill:!1,enableMouseWheel:ve,autoCorrectParts:be,autoSwitchParts:ye,autoSwitchKeys:t.autoSwitchKeys||[],twoDigitYearMax:Ie,allowCaretMode:he}},xe=n=>{d.current&&d.current.classList.add("k-focus"),N({focused:!0}),h&&Z(!0)},Ce=n=>{d.current&&d.current.classList.remove("k-focus"),N({focused:!1})},Ee=(n,l)=>typeof n!=typeof l?!0:typeof n=="string"&&typeof l=="string"?n!==l:typeof n=="object"&&typeof l=="object"?JSON.stringify(n)!==JSON.stringify(l):!1,we=n=>typeof n=="string"?n:{inputFormat:n,displayFormat:n},K=n=>{S.current=g(),Le(),v.current=n,S.current=void 0},J=n=>{t.onChange&&t.onChange(n)},Y=n=>{o.getActiveElement(document)===s.current&&n.preventDefault()},Te=()=>new pe.DateInput(s.current,{...T(),format:we(T().format),events:{focus:xe,blur:Ce,valueChange:K,click:J}}),X=()=>{s.current&&s.current.setCustomValidity&&s.current.setCustomValidity(R().valid?"":H||i.validationMessage)},Z=a.useCallback(n=>{var l;if(s.current&&h&&n){const D=(r==null?void 0:r.current).currentText,k=(r==null?void 0:r.current).currentText.search(/[^a-zA-Z]/),p=D[k],A=D.split(p)[0].length;d.current&&d.current.classList.add("k-focus"),(l=r==null?void 0:r.current)==null||l.selectNearestSegment(A)}},[h]),Me=n=>{!s.current||!r.current||K(n)},Se=n=>{n.preventDefault();const l=o.getActiveElement(document);s.current&&l!==s.current&&s.current.focus({preventScroll:!0})},f=n=>{const l=g();v.current&&t.onChange&&!x.isEqual(v.current.oldValue,l)&&t.onChange.call(void 0,{syntheticEvent:n,nativeEvent:v.current.event,value:v.current.value,target:M.current}),v.current=null},Pe=n=>{var l;(l=r.current)==null||l.modifyDateSegmentValue(1),f(n)},Re=n=>{var l;(l=r.current)==null||l.modifyDateSegmentValue(-1),f(n)},M=a.useRef(null),s=a.useRef(null),d=a.useRef(null);a.useImperativeHandle(M,()=>({props:t,get options(){return T()},get text(){return z()},get element(){return s.current},get name(){return t.name},get value(){return g()},get validity(){return R()},focus:De,updateOnPaste:Me})),a.useImperativeHandle(b,()=>M.current);const r=a.useRef(null),q=a.useRef(null),L=a.useRef(!1),S=a.useRef(null),v=a.useRef(null),I=a.useRef(t),[qe,N]=a.useState({focused:!1}),[,Le]=a.useReducer(n=>n+1,0);a.useLayoutEffect(()=>{L.current||(r.current=Te(),q.current=r.current.dateObject,L.current=!0)},[]),a.useEffect(()=>(X(),L.current||d.current&&d.current.addEventListener("wheel",Y,{passive:!1}),h&&(N({focused:!0}),Z(!0)),()=>{d.current&&d.current.removeEventListener("wheel",Y)}),[]),a.useEffect(()=>{X(),r.current&&((Ee(I.current.format,P)||I.current.readonly!==t.readonly||JSON.stringify(I.current.steps)!==JSON.stringify(t.steps)||W().locale!==r.current.options.intlService.locale)&&r.current.setOptions(T(),!0),I.current.value!==t.value&&(q.current.getValue()!==null||t.value!==null)&&q.current.setValue(t.value),t.ariaExpanded!==void 0&&t.ariaExpanded&&(r.current.options.placeholder=null),t.ariaExpanded!==void 0&&!t.ariaExpanded&&(r.current.options.placeholder=y),r.current.refreshElementValue(),I.current={format:P,readonly:t.readonly,ariaExpanded:t.ariaExpanded,steps:t.steps,value:t.value})});const $=t.id||m+"-accessibility-id",O=j&&j.uDateInput,G=z(),V=!ge||R().valid;a.useImperativeHandle(t._ref,()=>M.current);const Q=a.createElement("span",{ref:n=>{d.current=n},style:t.label?void 0:{width:t.width},dir:t.dir,className:o.classNames(o.uDateInput.wrapper({c:O,size:le,fillMode:ue,rounded:ie,disabled:w,required:U(),invalid:!V}),t.className)},a.createElement("input",{ref:n=>{s.current=n},role:t.ariaRole||"textbox",readOnly:t.readonly,tabIndex:t.tabIndex||0,disabled:w,title:t.title!==void 0?t.title:G,type:"text",spellCheck:!1,autoComplete:"off",autoCorrect:"off",autoFocus:h,className:o.classNames(o.uDateInput.inputInner({c:O})),id:$,value:G,"aria-label":t.ariaLabel,"aria-labelledby":t.ariaLabelledBy,"aria-describedby":t.ariaDescribedBy,"aria-haspopup":Oe,"aria-disabled":w,"aria-expanded":t.ariaExpanded,"aria-controls":t.ariaControls,"aria-required":t.required,"aria-invalid":!V,onKeyDown:f,onChange:f,onWheel:f,onInput:f,onClick:f,name:t.name,...t.inputAttributes}),t.children,t.clearButton&&t.value&&a.createElement(_e,{onClick:J,key:"clearbutton"}),se&&a.createElement("span",{className:o.classNames(o.uDateInput.inputSpinner({c:O})),onMouseDown:Se},a.createElement(te.Button,{tabIndex:-1,type:"button",className:o.classNames(o.uDateInput.spinnerIncrease({c:O})),icon:"caret-alt-up",svgIcon:ne.caretAltUpIcon,"aria-label":E.toLanguageString(c.increaseValue,c.messages[c.increaseValue]),title:E.toLanguageString(c.increaseValue,c.messages[c.increaseValue]),onClick:Pe}),a.createElement(te.Button,{tabIndex:-1,type:"button",className:o.classNames(o.uDateInput.spinnerDecrease({c:O})),icon:"caret-alt-down",svgIcon:ne.caretAltDownIcon,"aria-label":E.toLanguageString(c.decreaseValue,c.messages[c.decreaseValue]),title:E.toLanguageString(c.decreaseValue,c.messages[c.decreaseValue]),onClick:Re})));return t.label?a.createElement(ke.FloatingLabel,{label:t.label,editorId:$,editorValue:(ee=s.current)==null?void 0:ee.value,editorValid:V,editorDisabled:w,children:Q,style:{width:t.width}}):Q});F.propTypes={value:e.instanceOf(Date),format:e.oneOfType([u.nullable(e.string),e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([u.nullable(e.oneOf(["wide","narrow","short","formatPattern"])),e.shape({year:u.nullable(e.string),month:u.nullable(e.string),day:u.nullable(e.string),hour:u.nullable(e.string),minute:u.nullable(e.string),second:u.nullable(e.string)})]),width:e.oneOfType([e.string,e.number]),tabIndex:e.number,title:e.string,steps:e.shape({year:u.nullable(e.number),month:u.nullable(e.number),day:u.nullable(e.number),hour:u.nullable(e.number),minute:u.nullable(e.number),second:u.nullable(e.number)}),min:e.instanceOf(Date),max:e.instanceOf(Date),disabled:e.bool,spinners:e.bool,name:e.string,dir:e.string,label:e.node,id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,ariaRole:e.string,ariaHasPopup:e.oneOfType([e.bool,e.oneOf(["grid","dialog"])]),ariaExpanded:e.oneOfType([e.bool]),onChange:e.func,validationMessage:e.string,required:e.bool,valid:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object};const i={format:_.DEFAULT_FORMAT,size:void 0,rounded:void 0,fillMode:void 0,formatPlaceholder:_.DEFAULT_FORMAT_PLACEHOLDER,spinners:!1,disabled:!1,max:x.cloneDate(u.MAX_DATE),min:x.cloneDate(u.MIN_DATE),minTime:x.cloneDate(u.MIN_TIME),maxTime:x.cloneDate(u.MAX_TIME),validityStyles:!0,validationMessage:je,placeholder:null,enableMouseWheel:!0,autoCorrectParts:!0,autoSwitchParts:!0,allowCaretMode:!1,twoDigitYearMax:68,ariaHasPopup:"grid",autoFocus:!1},B=o.createPropsContext();F.displayName="KendoReactDateInput";exports.DateInput=F;exports.DateInputPropsContext=B;exports.dateInputDefaultProps=i;
|
package/dateinput/DateInput.mjs
CHANGED
|
@@ -342,7 +342,7 @@ ne.propTypes = {
|
|
|
342
342
|
required: e.bool,
|
|
343
343
|
valid: e.bool,
|
|
344
344
|
size: e.oneOf(["small", "medium", "large"]),
|
|
345
|
-
rounded: e.oneOf(["small", "medium", "large", "full"]),
|
|
345
|
+
rounded: e.oneOf(["small", "medium", "large", "full", "none"]),
|
|
346
346
|
fillMode: e.oneOf(["solid", "flat", "outline"]),
|
|
347
347
|
autoFocus: e.bool,
|
|
348
348
|
inputAttributes: e.object
|
|
@@ -91,6 +91,7 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps,
|
|
|
91
91
|
* - medium
|
|
92
92
|
* - large
|
|
93
93
|
* - full
|
|
94
|
+
* - none
|
|
94
95
|
*
|
|
95
96
|
* @default undefined (theme-controlled)
|
|
96
97
|
*
|
|
@@ -99,7 +100,7 @@ export interface DatePickerProps extends DatePickerSettings, FormComponentProps,
|
|
|
99
100
|
* <DatePicker rounded="full" />
|
|
100
101
|
* ```
|
|
101
102
|
*/
|
|
102
|
-
rounded?: 'small' | 'medium' | 'large' | 'full';
|
|
103
|
+
rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
|
|
103
104
|
/**
|
|
104
105
|
* Control the `fillMode` (background) of the DatePicker.
|
|
105
106
|
*
|
|
@@ -216,7 +217,7 @@ export declare const datePickerDefaultProps: {
|
|
|
216
217
|
weekNumber: boolean;
|
|
217
218
|
validityStyles: boolean;
|
|
218
219
|
size: "small" | "medium" | "large" | undefined;
|
|
219
|
-
rounded: "small" | "medium" | "large" | "full" | undefined;
|
|
220
|
+
rounded: "small" | "none" | "medium" | "large" | "full" | undefined;
|
|
220
221
|
fillMode: "flat" | "solid" | "outline" | undefined;
|
|
221
222
|
autoFocus: boolean;
|
|
222
223
|
};
|
package/datepicker/DatePicker.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const lt=require("react"),e=require("prop-types"),ut=require("@progress/kendo-react-popup"),W=require("@progress/kendo-date-math"),i=require("@progress/kendo-react-common"),it=require("@progress/kendo-svg-icons"),st=require("../dateinput/DateInput.js"),ct=require("../calendar/components/Calendar.js"),a=require("../utils.js"),j=require("../messages/index.js"),dt=require("@progress/kendo-react-intl"),ft=require("./ToggleButton.js"),pt=require("../hooks/usePickerFloatingLabel.js"),mt=require("@progress/kendo-react-layout"),gt=require("../common/AdaptiveMode.js");function bt(n){const v=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const p in n)if(p!=="default"){const M=Object.getOwnPropertyDescriptor(n,p);Object.defineProperty(v,p,M.get?M:{enumerable:!0,get:()=>n[p]})}}return v.default=n,Object.freeze(v)}const o=bt(lt),U=o.forwardRef((n,v)=>{const p=i.useId(n.id),M=dt.useLocalization(),w=i.useAdaptiveModeContext(),{defaultShow:fe=l.defaultShow,defaultValue:pe=l.defaultValue,dateInput:me=l.dateInput,calendar:ge=l.calendar,toggleButton:be=l.toggleButton,popup:he=l.popup,disabled:y=l.disabled,format:ve=l.format,max:I=l.max,min:T=l.min,popupSettings:D=l.popupSettings,tabIndex:we=l.tabIndex,weekNumber:ye=l.weekNumber,validityStyles:H=l.validityStyles,size:B=l.size,rounded:E=l.rounded,fillMode:x=l.fillMode,autoFocus:De=l.autoFocus,show:Y,autoSwitchParts:Ce,autoSwitchKeys:ke,twoDigitYearMax:Oe,ariaLabel:Pe,adaptive:ht,adaptiveTitle:Me=n.label||void 0,adaptiveSubtitle:Re,formatPlaceholder:Se,inputAttributes:_e,validationMessage:$,visited:vt,value:q,touched:wt,modified:yt,_adaptiveMode:Dt=w,valid:X,focusedDate:Ie,id:Te,ariaLabelledBy:Be,ariaDescribedBy:Ee,placeholder:xe,onChange:Z,onOpen:G,onClose:J,...Q}=i.usePropsContext(de,n),A=()=>{if(i.canUseDOM)return k.current&&k.current.ownerDocument||window.document},s=()=>!!(h.windowWidth&&w&&h.windowWidth<=(w==null?void 0:w.medium)&&n.adaptive),m=()=>{const t=R.current!==void 0?R.current:q!==void 0?q:h.value;return t!==null?W.cloneDate(t):null},u=()=>S.current!==void 0?S.current:Y!==void 0?Y:h.show,qe=()=>me||l.dateInput,Ae=()=>be||l.toggleButton,Ne=()=>ge||l.calendar,Fe=()=>he||l.popup,ee=()=>n.required!==void 0?n.required:!1,N=()=>{const t=m()||q||null,r=T,c=I,_=a.isInDateRange(t,r,c),z=$!==void 0,L=(!ee()||t!=null)&&_,K=X!==void 0?X:L;return{customError:z,rangeOverflow:t&&c.getTime()<t.getTime()||!1,rangeUnderflow:t&&t.getTime()<r.getTime()||!1,valid:K,valueMissing:t===null}},Ve=t=>{for(const r of t)P({windowWidth:r.target.clientWidth})},ze=()=>{d.current&&d.current.focus()},te=t=>{f.current=t},g=t=>{u()!==t&&(P({show:t}),t&&G&&G({target:C.current}),!t&&J&&J({target:C.current}))},Le=t=>{const r=m();return r&&t?a.setTime(t,r):t},Ke=t=>{D!=null&&D.onMouseDownOutside&&D.onMouseDownOutside(t)},ne=(t,r)=>{P({value:W.cloneDate(t||void 0)}),R.current=t,S.current=!1,s()||(b.current=!0),Z&&Z({syntheticEvent:r.syntheticEvent,nativeEvent:r.nativeEvent,value:m(),show:u(),target:C.current}),R.current=void 0,S.current=void 0,g(!1)},We=t=>{const r=Le(t.value);ne(r,t)},oe=()=>{const{popupClass:t,...r}=D,c=u(),_=m(),z=_&&W.getDate(_),L=i.classNames(t),K={popupClass:"k-datepicker-popup",show:c,anchor:k.current,className:L,id:re,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...r,onMouseDownOutside:Ke},se={disabled:y,value:z,min:T,max:I,weekNumber:ye,focusedDate:Ie,className:s()?"k-calendar-lg":"",navigation:!s(),onChange:We},ce=Ne(),rt=Fe();return s()?o.createElement(ce,{_ref:te,...se}):o.createElement(rt,{...K},o.createElement(ce,{_ref:te,...se}))},ae=()=>{P({focused:!1}),g(!1)},je=()=>{const{windowWidth:t=0}=h,r={expand:u(),onClose:ae,title:Me,subTitle:Re,windowWidth:t};return o.createElement(gt.AdaptiveMode,{...r},o.createElement(mt.ActionSheetContent,null,oe()))},Ue=t=>{ne(t.value,t)},He=()=>{P({focused:!0})},Ye=()=>{g(!u())},F=()=>{y||(b.current=!0,g(!u()))},$e=t=>{t.preventDefault()},Xe=t=>{const{altKey:r,keyCode:c}=t;if(c===i.Keys.esc&&u()){b.current=!0,g(!1);return}r&&(c===i.Keys.up||c===i.Keys.down)&&(t.preventDefault(),t.stopPropagation(),b.current=c===i.Keys.up,g(c===i.Keys.down))},C=o.useRef(null),k=o.useRef(null),d=o.useRef(null),f=o.useRef(null);o.useImperativeHandle(C,()=>({props:n,get element(){return k.current},get calendar(){return f.current},get dateInput(){return d.current},get name(){return n.name},get show(){return u()},get validity(){return N()},get value(){return m()},get mobileMode(){return s()},togglePopup:Ye,focus:ze})),o.useImperativeHandle(v,()=>C.current);const R=o.useRef(void 0),S=o.useRef(void 0),Ze=o.useRef(null),b=o.useRef(!1),V=o.useRef(!1),O=o.useRef(null),[h,Ge]=o.useState({value:pe,show:fe,focused:!1}),[,Je]=o.useReducer(t=>t,!0),P=t=>{Ge(r=>({...r,...t}))};o.useEffect(()=>{f.current&&f.current.element&&u()&&!V.current&&f.current.element.focus({preventScroll:!0}),s()&&u()&&!V.current&&setTimeout(()=>{f.current&&f.current.element&&f.current.element.focus({preventScroll:!0})},300),d.current&&d.current.element&&!u()&&b.current&&d.current.element.focus({preventScroll:!0}),V.current=u(),b.current=!1}),o.useEffect(()=>{var t;return O.current=i.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(r=>Ve(r)),u()&&Je(),(t=A())!=null&&t.body&&O.current&&O.current.observe(A().body),()=>{var r;clearTimeout(Ze.current),(r=A())!=null&&r.body&&O.current&&O.current.disconnect()}},[]);const re=p+"-popup-id",Qe=oe(),et=qe(),tt=m(),nt=Ae(),ot=je(),le=!H||N().valid,ue=M.toLanguageString(j.toggleCalendar,j.messages[j.toggleCalendar]),at={disabled:y,format:ve,formatPlaceholder:Se,id:Te,ariaLabelledBy:Be,ariaDescribedBy:Ee,ariaLabel:Pe,max:I,min:T,name:n.name,onChange:Ue,required:n.required,_ref:d,tabIndex:u()?-1:we,title:n.title,valid:N().valid,validationMessage:$,validityStyles:H,value:tt,label:void 0,placeholder:h.focused?null:xe,ariaExpanded:u(),autoFill:n.autoFill,twoDigitYearMax:Oe,enableMouseWheel:n.enableMouseWheel,autoCorrectParts:n.autoCorrectParts,autoSwitchParts:Ce,autoSwitchKeys:ke,allowCaretMode:n.allowCaretMode,inputAttributes:_e},ie=o.createElement(i.AsyncFocusBlur,{onFocus:He,onBlur:s()?void 0:ae,onSyncBlur:n.onBlur,onSyncFocus:n.onFocus},t=>o.createElement(o.Fragment,null,o.createElement("span",{...n.label?{}:Q,ref:k,className:i.classNames("k-input","k-datepicker",{[`k-input-${i.kendoThemeMaps.sizeMap[B]||B}`]:B,[`k-rounded-${i.kendoThemeMaps.roundedMap[E]||E}`]:E,[`k-input-${x}`]:x,"k-invalid":!le,"k-required":ee(),"k-disabled":y},n.className),onKeyDown:Xe,style:{width:n.width},onFocus:s()?F:t.onFocus,onBlur:t.onBlur,onClick:s()?F:void 0},o.createElement(et,{_ref:d,ariaRole:"combobox",ariaExpanded:u(),ariaControls:re,autoFocus:De,...at}),o.createElement(nt,{type:"button",icon:"calendar",svgIcon:it.calendarIcon,title:ue,className:"k-input-button",onClick:s()?void 0:F,"aria-label":ue,fillMode:x,onMouseDown:$e}),!s()&&Qe),s()&&ot));return n.label?o.createElement(pt.PickerFloatingLabel,{dateInput:d,label:n.label,editorId:p,editorValid:le,editorDisabled:y,children:ie,style:{width:n.width},...Q}):ie});U.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:a.nullable(e.string),pattern:a.nullable(e.string),date:a.nullable(e.oneOf(["short","medium","long","full"])),time:a.nullable(e.oneOf(["short","medium","long","full"])),datetime:a.nullable(e.oneOf(["short","medium","long","full"])),era:a.nullable(e.oneOf(["narrow","short","long"])),year:a.nullable(e.oneOf(["numeric","2-digit"])),month:a.nullable(e.oneOf(["numeric","2-digit","narrow","short","long"])),day:a.nullable(e.oneOf(["numeric","2-digit"])),weekday:a.nullable(e.oneOf(["narrow","short","long"])),hour:a.nullable(e.oneOf(["numeric","2-digit"])),hour12:a.nullable(e.bool),minute:a.nullable(e.oneOf(["numeric","2-digit"])),second:a.nullable(e.oneOf(["numeric","2-digit"])),timeZoneName:a.nullable(e.oneOf(["short","long"]))})]),formatPlaceholder:e.oneOfType([a.nullable(e.oneOf(["wide","narrow","short","formatPattern"])),e.shape({year:a.nullable(e.string),month:a.nullable(e.string),day:a.nullable(e.string),hour:a.nullable(e.string),minute:a.nullable(e.string),second:a.nullable(e.string)})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:a.nullable(e.bool),appendTo:a.nullable(e.any),popupClass:a.nullable(e.string)}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,valid:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full"]),fillMode:e.oneOf(["solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string,adaptiveSubtitle:e.string,autoFocus:e.bool,inputAttributes:e.object};const l={defaultShow:!1,defaultValue:null,dateInput:st.DateInput,calendar:ct.Calendar,toggleButton:ft.ToggleButton,popup:ut.Popup,disabled:!1,format:"d",max:a.MAX_DATE,min:a.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1},de=i.createPropsContext();U.displayName="KendoReactDatePicker";exports.DatePicker=U;exports.DatePickerPropsContext=de;exports.datePickerDefaultProps=l;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const lt=require("react"),e=require("prop-types"),ut=require("@progress/kendo-react-popup"),W=require("@progress/kendo-date-math"),i=require("@progress/kendo-react-common"),it=require("@progress/kendo-svg-icons"),st=require("../dateinput/DateInput.js"),ct=require("../calendar/components/Calendar.js"),a=require("../utils.js"),j=require("../messages/index.js"),dt=require("@progress/kendo-react-intl"),ft=require("./ToggleButton.js"),pt=require("../hooks/usePickerFloatingLabel.js"),mt=require("@progress/kendo-react-layout"),gt=require("../common/AdaptiveMode.js");function bt(n){const v=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const p in n)if(p!=="default"){const M=Object.getOwnPropertyDescriptor(n,p);Object.defineProperty(v,p,M.get?M:{enumerable:!0,get:()=>n[p]})}}return v.default=n,Object.freeze(v)}const o=bt(lt),U=o.forwardRef((n,v)=>{const p=i.useId(n.id),M=dt.useLocalization(),w=i.useAdaptiveModeContext(),{defaultShow:fe=l.defaultShow,defaultValue:pe=l.defaultValue,dateInput:me=l.dateInput,calendar:ge=l.calendar,toggleButton:be=l.toggleButton,popup:he=l.popup,disabled:y=l.disabled,format:ve=l.format,max:I=l.max,min:T=l.min,popupSettings:D=l.popupSettings,tabIndex:we=l.tabIndex,weekNumber:ye=l.weekNumber,validityStyles:H=l.validityStyles,size:B=l.size,rounded:E=l.rounded,fillMode:x=l.fillMode,autoFocus:De=l.autoFocus,show:Y,autoSwitchParts:Ce,autoSwitchKeys:ke,twoDigitYearMax:Oe,ariaLabel:Pe,adaptive:ht,adaptiveTitle:Me=n.label||void 0,adaptiveSubtitle:Re,formatPlaceholder:Se,inputAttributes:_e,validationMessage:$,visited:vt,value:q,touched:wt,modified:yt,_adaptiveMode:Dt=w,valid:X,focusedDate:Ie,id:Te,ariaLabelledBy:Be,ariaDescribedBy:Ee,placeholder:xe,onChange:Z,onOpen:G,onClose:J,...Q}=i.usePropsContext(de,n),A=()=>{if(i.canUseDOM)return k.current&&k.current.ownerDocument||window.document},s=()=>!!(h.windowWidth&&w&&h.windowWidth<=(w==null?void 0:w.medium)&&n.adaptive),m=()=>{const t=R.current!==void 0?R.current:q!==void 0?q:h.value;return t!==null?W.cloneDate(t):null},u=()=>S.current!==void 0?S.current:Y!==void 0?Y:h.show,qe=()=>me||l.dateInput,Ae=()=>be||l.toggleButton,Ne=()=>ge||l.calendar,Fe=()=>he||l.popup,ee=()=>n.required!==void 0?n.required:!1,N=()=>{const t=m()||q||null,r=T,c=I,_=a.isInDateRange(t,r,c),z=$!==void 0,L=(!ee()||t!=null)&&_,K=X!==void 0?X:L;return{customError:z,rangeOverflow:t&&c.getTime()<t.getTime()||!1,rangeUnderflow:t&&t.getTime()<r.getTime()||!1,valid:K,valueMissing:t===null}},Ve=t=>{for(const r of t)P({windowWidth:r.target.clientWidth})},ze=()=>{d.current&&d.current.focus()},te=t=>{f.current=t},g=t=>{u()!==t&&(P({show:t}),t&&G&&G({target:C.current}),!t&&J&&J({target:C.current}))},Le=t=>{const r=m();return r&&t?a.setTime(t,r):t},Ke=t=>{D!=null&&D.onMouseDownOutside&&D.onMouseDownOutside(t)},ne=(t,r)=>{P({value:W.cloneDate(t||void 0)}),R.current=t,S.current=!1,s()||(b.current=!0),Z&&Z({syntheticEvent:r.syntheticEvent,nativeEvent:r.nativeEvent,value:m(),show:u(),target:C.current}),R.current=void 0,S.current=void 0,g(!1)},We=t=>{const r=Le(t.value);ne(r,t)},oe=()=>{const{popupClass:t,...r}=D,c=u(),_=m(),z=_&&W.getDate(_),L=i.classNames(t),K={popupClass:"k-datepicker-popup",show:c,anchor:k.current,className:L,id:re,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...r,onMouseDownOutside:Ke},se={disabled:y,value:z,min:T,max:I,weekNumber:ye,focusedDate:Ie,className:s()?"k-calendar-lg":"",navigation:!s(),onChange:We},ce=Ne(),rt=Fe();return s()?o.createElement(ce,{_ref:te,...se}):o.createElement(rt,{...K},o.createElement(ce,{_ref:te,...se}))},ae=()=>{P({focused:!1}),g(!1)},je=()=>{const{windowWidth:t=0}=h,r={expand:u(),onClose:ae,title:Me,subTitle:Re,windowWidth:t};return o.createElement(gt.AdaptiveMode,{...r},o.createElement(mt.ActionSheetContent,null,oe()))},Ue=t=>{ne(t.value,t)},He=()=>{P({focused:!0})},Ye=()=>{g(!u())},F=()=>{y||(b.current=!0,g(!u()))},$e=t=>{t.preventDefault()},Xe=t=>{const{altKey:r,keyCode:c}=t;if(c===i.Keys.esc&&u()){b.current=!0,g(!1);return}r&&(c===i.Keys.up||c===i.Keys.down)&&(t.preventDefault(),t.stopPropagation(),b.current=c===i.Keys.up,g(c===i.Keys.down))},C=o.useRef(null),k=o.useRef(null),d=o.useRef(null),f=o.useRef(null);o.useImperativeHandle(C,()=>({props:n,get element(){return k.current},get calendar(){return f.current},get dateInput(){return d.current},get name(){return n.name},get show(){return u()},get validity(){return N()},get value(){return m()},get mobileMode(){return s()},togglePopup:Ye,focus:ze})),o.useImperativeHandle(v,()=>C.current);const R=o.useRef(void 0),S=o.useRef(void 0),Ze=o.useRef(null),b=o.useRef(!1),V=o.useRef(!1),O=o.useRef(null),[h,Ge]=o.useState({value:pe,show:fe,focused:!1}),[,Je]=o.useReducer(t=>t,!0),P=t=>{Ge(r=>({...r,...t}))};o.useEffect(()=>{f.current&&f.current.element&&u()&&!V.current&&f.current.element.focus({preventScroll:!0}),s()&&u()&&!V.current&&setTimeout(()=>{f.current&&f.current.element&&f.current.element.focus({preventScroll:!0})},300),d.current&&d.current.element&&!u()&&b.current&&d.current.element.focus({preventScroll:!0}),V.current=u(),b.current=!1}),o.useEffect(()=>{var t;return O.current=i.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(r=>Ve(r)),u()&&Je(),(t=A())!=null&&t.body&&O.current&&O.current.observe(A().body),()=>{var r;clearTimeout(Ze.current),(r=A())!=null&&r.body&&O.current&&O.current.disconnect()}},[]);const re=p+"-popup-id",Qe=oe(),et=qe(),tt=m(),nt=Ae(),ot=je(),le=!H||N().valid,ue=M.toLanguageString(j.toggleCalendar,j.messages[j.toggleCalendar]),at={disabled:y,format:ve,formatPlaceholder:Se,id:Te,ariaLabelledBy:Be,ariaDescribedBy:Ee,ariaLabel:Pe,max:I,min:T,name:n.name,onChange:Ue,required:n.required,_ref:d,tabIndex:u()?-1:we,title:n.title,valid:N().valid,validationMessage:$,validityStyles:H,value:tt,label:void 0,placeholder:h.focused?null:xe,ariaExpanded:u(),autoFill:n.autoFill,twoDigitYearMax:Oe,enableMouseWheel:n.enableMouseWheel,autoCorrectParts:n.autoCorrectParts,autoSwitchParts:Ce,autoSwitchKeys:ke,allowCaretMode:n.allowCaretMode,inputAttributes:_e},ie=o.createElement(i.AsyncFocusBlur,{onFocus:He,onBlur:s()?void 0:ae,onSyncBlur:n.onBlur,onSyncFocus:n.onFocus},t=>o.createElement(o.Fragment,null,o.createElement("span",{...n.label?{}:Q,ref:k,className:i.classNames("k-input","k-datepicker",{[`k-input-${i.kendoThemeMaps.sizeMap[B]||B}`]:B,[`k-rounded-${i.kendoThemeMaps.roundedMap[E]||E}`]:E,[`k-input-${x}`]:x,"k-invalid":!le,"k-required":ee(),"k-disabled":y},n.className),onKeyDown:Xe,style:{width:n.width},onFocus:s()?F:t.onFocus,onBlur:t.onBlur,onClick:s()?F:void 0},o.createElement(et,{_ref:d,ariaRole:"combobox",ariaExpanded:u(),ariaControls:re,autoFocus:De,...at}),o.createElement(nt,{type:"button",icon:"calendar",svgIcon:it.calendarIcon,title:ue,className:"k-input-button",onClick:s()?void 0:F,"aria-label":ue,fillMode:x,onMouseDown:$e}),!s()&&Qe),s()&&ot));return n.label?o.createElement(pt.PickerFloatingLabel,{dateInput:d,label:n.label,editorId:p,editorValid:le,editorDisabled:y,children:ie,style:{width:n.width},...Q}):ie});U.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:a.nullable(e.string),pattern:a.nullable(e.string),date:a.nullable(e.oneOf(["short","medium","long","full"])),time:a.nullable(e.oneOf(["short","medium","long","full"])),datetime:a.nullable(e.oneOf(["short","medium","long","full"])),era:a.nullable(e.oneOf(["narrow","short","long"])),year:a.nullable(e.oneOf(["numeric","2-digit"])),month:a.nullable(e.oneOf(["numeric","2-digit","narrow","short","long"])),day:a.nullable(e.oneOf(["numeric","2-digit"])),weekday:a.nullable(e.oneOf(["narrow","short","long"])),hour:a.nullable(e.oneOf(["numeric","2-digit"])),hour12:a.nullable(e.bool),minute:a.nullable(e.oneOf(["numeric","2-digit"])),second:a.nullable(e.oneOf(["numeric","2-digit"])),timeZoneName:a.nullable(e.oneOf(["short","long"]))})]),formatPlaceholder:e.oneOfType([a.nullable(e.oneOf(["wide","narrow","short","formatPattern"])),e.shape({year:a.nullable(e.string),month:a.nullable(e.string),day:a.nullable(e.string),hour:a.nullable(e.string),minute:a.nullable(e.string),second:a.nullable(e.string)})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,ariaLabel:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:a.nullable(e.bool),appendTo:a.nullable(e.any),popupClass:a.nullable(e.string)}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,valid:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string,adaptiveSubtitle:e.string,autoFocus:e.bool,inputAttributes:e.object};const l={defaultShow:!1,defaultValue:null,dateInput:st.DateInput,calendar:ct.Calendar,toggleButton:ft.ToggleButton,popup:ut.Popup,disabled:!1,format:"d",max:a.MAX_DATE,min:a.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1},de=i.createPropsContext();U.displayName="KendoReactDatePicker";exports.DatePicker=U;exports.DatePickerPropsContext=de;exports.datePickerDefaultProps=l;
|
|
@@ -381,7 +381,7 @@ de.propTypes = {
|
|
|
381
381
|
required: e.bool,
|
|
382
382
|
valid: e.bool,
|
|
383
383
|
size: e.oneOf(["small", "medium", "large"]),
|
|
384
|
-
rounded: e.oneOf(["small", "medium", "large", "full"]),
|
|
384
|
+
rounded: e.oneOf(["small", "medium", "large", "full", "none"]),
|
|
385
385
|
fillMode: e.oneOf(["solid", "flat", "outline"]),
|
|
386
386
|
adaptive: e.bool,
|
|
387
387
|
adaptiveTitle: e.string,
|
|
@@ -95,6 +95,7 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
|
|
|
95
95
|
* - medium
|
|
96
96
|
* - large
|
|
97
97
|
* - full
|
|
98
|
+
* - none
|
|
98
99
|
*
|
|
99
100
|
* @default undefined (theme-controlled)
|
|
100
101
|
*
|
|
@@ -103,7 +104,7 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
|
|
|
103
104
|
* <DateTimePicker rounded="full" />
|
|
104
105
|
* ```
|
|
105
106
|
*/
|
|
106
|
-
rounded?: 'small' | 'medium' | 'large' | 'full';
|
|
107
|
+
rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
|
|
107
108
|
/**
|
|
108
109
|
* Control the `fillMode` (background) of the DateTimePicker.
|
|
109
110
|
*
|
|
@@ -247,7 +248,7 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
|
|
|
247
248
|
valid: PropTypes.Requireable<boolean>;
|
|
248
249
|
cancelButton: PropTypes.Requireable<boolean>;
|
|
249
250
|
size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>;
|
|
250
|
-
rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | undefined>;
|
|
251
|
+
rounded: PropTypes.Requireable<"small" | "none" | "medium" | "large" | "full" | undefined>;
|
|
251
252
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | undefined>;
|
|
252
253
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
253
254
|
inputAttributes: PropTypes.Requireable<object>;
|
|
@@ -269,7 +270,7 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
|
|
|
269
270
|
cancelButton: boolean;
|
|
270
271
|
dateInput: React.ComponentType<DateInputProps<any>>;
|
|
271
272
|
size: "small" | "medium" | "large" | undefined;
|
|
272
|
-
rounded: "small" | "medium" | "large" | "full" | undefined;
|
|
273
|
+
rounded: "small" | "none" | "medium" | "large" | "full" | undefined;
|
|
273
274
|
fillMode: "flat" | "solid" | "outline" | undefined;
|
|
274
275
|
autoFocus: boolean;
|
|
275
276
|
};
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),p=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ae=require("../common/AdaptiveMode.js"),ne=require("@progress/kendo-react-layout");function re(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const r=re(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:n,format:c,calendar:d,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:w}=this.props;return r.createElement(ie.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:n,focusedDate:f,format:c,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:n,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ae.AdaptiveMode,{...c},r.createElement(ne.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:I.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?I.cloneDate(i):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get validity(){const i=p.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,n=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}componentDidMount(){var i;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:c,disabled:d,tabIndex:u,title:v,id:f,format:w,formatPlaceholder:b,min:M,max:k,className:C,width:x,name:q,validationMessage:E,required:F,validityStyles:R,minTime:A,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:N,popup:_=J.Popup,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,S=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:B,ariaDescribedBy:N,format:w,formatPlaceholder:b,disabled:d,title:v,validityStyles:R,validationMessage:E,required:F,min:M,max:k,minTime:A,maxTime:z,name:q,tabIndex:this.show?-1:u,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:S,size:i,fillMode:s,rounded:t,disabled:d,required:this.required,invalid:!D}),C),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:c,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:S})),fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(_,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:S})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="DateTimePicker",a.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=a;const P=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),p=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ae=require("../common/AdaptiveMode.js"),ne=require("@progress/kendo-react-layout");function re(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const r=re(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:n,format:c,calendar:d,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:w}=this.props;return r.createElement(ie.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:n,focusedDate:f,format:c,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:n,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ae.AdaptiveMode,{...c},r.createElement(ne.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:I.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?I.cloneDate(i):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get validity(){const i=p.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,n=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}componentDidMount(){var i;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:c,disabled:d,tabIndex:u,title:v,id:f,format:w,formatPlaceholder:b,min:M,max:k,className:C,width:x,name:q,validationMessage:E,required:F,validityStyles:R,minTime:A,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:N,popup:_=J.Popup,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,S=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:B,ariaDescribedBy:N,format:w,formatPlaceholder:b,disabled:d,title:v,validityStyles:R,validationMessage:E,required:F,min:M,max:k,minTime:A,maxTime:z,name:q,tabIndex:this.show?-1:u,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:S,size:i,fillMode:s,rounded:t,disabled:d,required:this.required,invalid:!D}),C),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:c,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:S})),fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(_,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:S})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="DateTimePicker",a.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=a;const P=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;
|
|
@@ -469,7 +469,7 @@ o.displayName = "DateTimePicker", o.propTypes = {
|
|
|
469
469
|
valid: e.bool,
|
|
470
470
|
cancelButton: e.bool,
|
|
471
471
|
size: e.oneOf(["small", "medium", "large"]),
|
|
472
|
-
rounded: e.oneOf(["small", "medium", "large", "full"]),
|
|
472
|
+
rounded: e.oneOf(["small", "medium", "large", "full", "none"]),
|
|
473
473
|
fillMode: e.oneOf(["solid", "flat", "outline"]),
|
|
474
474
|
autoFocus: e.bool,
|
|
475
475
|
inputAttributes: e.object
|