react-select-datepicker 3.0.1 → 3.0.3

package/README.md

@@ -157,6 +157,34 @@ export const App = () => {
 }
 ```
 
+#### Style options (CSS variables)
+
+Apply these variables on the root element (the wrapper with `rsd__react-select-datepicker`) or on a custom className.
+
+| Variable | Default | Used for |
+| --- | --- | --- |
+| `--rsd-gap` | `8px` | Space between selects in the row. |
+| `--rsd-legend-font-size` | `16px` | Group label font size. |
+| `--rsd-legend-font-weight` | `600` | Group label font weight. |
+| `--rsd-legend-margin-bottom` | `8px` | Spacing below group label. |
+| `--rsd-error-color` | `#d73a49` | Error message color. |
+| `--rsd-error-font-size` | `14px` | Error message font size. |
+| `--rsd-error-margin-top` | `8px` | Spacing above error message. |
+| `--rsd-required-color` | `#666` | Asterisk/required indicator color. |
+| `--rsd-required-margin-left` | `4px` | Spacing between label text and required indicator. |
+| `--rsd-label-margin-bottom` | `4px` | Spacing below field labels. |
+| `--rsd-select-padding` | `6px 8px` | Select padding. |
+| `--rsd-select-border` | `1px solid #d0d7de` | Select border. |
+| `--rsd-select-border-radius` | `6px` | Select border radius. |
+| `--rsd-select-font-size` | `14px` | Select font size. |
+| `--rsd-select-font-family` | `inherit` | Select font family. |
+| `--rsd-select-line-height` | `1.2` | Select line height. |
+| `--rsd-select-hover-border` | `#9aa4b2` | Select border color on hover. |
+| `--rsd-select-focus-border` | `#0969da` | Select border color on focus. |
+| `--rsd-select-focus-ring` | `0 0 0 3px rgba(9, 105, 218, 0.25)` | Select focus ring shadow. |
+| `--rsd-select-disabled-bg` | `#f6f8fa` | Disabled select background. |
+| `--rsd-select-disabled-color` | `#8c959f` | Disabled select text color. |
+
 ### Error boundary
 
 ```tsx

package/dist/components/SelectDatepicker.css.js

@@ -1 +1 @@
-import r from"../node_modules/style-inject/dist/style-inject.es.js";var e=".rsd__react-select-datepicker {\r\n  --rsd-gap: 8px;\r\n  --rsd-legend-font-size: 16px;\r\n  --rsd-legend-font-weight: 600;\r\n  --rsd-legend-margin-bottom: 8px;\r\n  --rsd-error-color: #d73a49;\r\n  --rsd-error-font-size: 14px;\r\n  --rsd-error-margin-top: 8px;\r\n  --rsd-required-color: #666;\r\n  --rsd-required-margin-left: 4px;\r\n  --rsd-label-margin-bottom: 4px;\r\n  --rsd-select-padding: 6px 8px;\r\n  --rsd-select-border: 1px solid #d0d7de;\r\n  --rsd-select-border-radius: 6px;\r\n  --rsd-select-font-size: 14px;\r\n  --rsd-select-disabled-bg: #f6f8fa;\r\n  --rsd-select-disabled-color: #8c959f;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.rsd__legend {\r\n  font-size: var(--rsd-legend-font-size);\r\n  font-weight: var(--rsd-legend-font-weight);\r\n  margin-bottom: var(--rsd-legend-margin-bottom);\r\n}\r\n\r\n.rsd__select-row {\r\n  display: flex;\r\n  gap: var(--rsd-gap);\r\n}\r\n\r\n.rsd__error-message {\r\n  color: var(--rsd-error-color);\r\n  font-size: var(--rsd-error-font-size);\r\n  margin-top: var(--rsd-error-margin-top);\r\n}\r\n";r(e);export{e as default};
+import r from"../node_modules/style-inject/dist/style-inject.es.js";var e=".rsd__react-select-datepicker {\r\n  --rsd-gap: 8px;\r\n  --rsd-legend-font-size: 16px;\r\n  --rsd-legend-font-weight: 600;\r\n  --rsd-legend-margin-bottom: 8px;\r\n  --rsd-error-color: #d73a49;\r\n  --rsd-error-font-size: 14px;\r\n  --rsd-error-margin-top: 8px;\r\n  --rsd-required-color: #666;\r\n  --rsd-required-margin-left: 4px;\r\n  --rsd-label-margin-bottom: 4px;\r\n  --rsd-select-padding: 6px 8px;\r\n  --rsd-select-border: 1px solid #d0d7de;\r\n  --rsd-select-border-radius: 6px;\r\n  --rsd-select-font-size: 14px;\r\n  --rsd-select-font-family: inherit;\r\n  --rsd-select-line-height: 1.2;\r\n  --rsd-select-hover-border: #9aa4b2;\r\n  --rsd-select-focus-border: #0969da;\r\n  --rsd-select-focus-ring: 0 0 0 3px rgba(9, 105, 218, 0.25);\r\n  --rsd-select-disabled-bg: #f6f8fa;\r\n  --rsd-select-disabled-color: #8c959f;\r\n\r\n  display: flex;\r\n  flex-direction: column;\r\n  border: 0;\r\n  padding: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n}\r\n\r\n.rsd__legend {\r\n  font-size: var(--rsd-legend-font-size);\r\n  font-weight: var(--rsd-legend-font-weight);\r\n  margin-bottom: var(--rsd-legend-margin-bottom);\r\n}\r\n\r\n.rsd__select-row {\r\n  display: flex;\r\n  gap: var(--rsd-gap);\r\n}\r\n\r\n.rsd__error-message {\r\n  color: var(--rsd-error-color);\r\n  font-size: var(--rsd-error-font-size);\r\n  margin-top: var(--rsd-error-margin-top);\r\n}\r\n";r(e);export{e as default};

package/dist/components/SelectDatepicker.js

@@ -1 +1 @@
-import{__rest as e,__assign as a}from"../_virtual/_tslib.js";import t,{useState as n,useMemo as r,useRef as o,useEffect as l,useCallback as i}from"react";import{classPrefix as c}from"../utils/helpers.js";import{getCachedYearsObject as s,getCachedMonthsObject as u,getCachedDaysObject as d}from"../utils/performance.js";import{normalizeToLocalMidnight as m,isValidDate as f,createSmartDate as v}from"../utils/dateUtils.js";import{isValidOrder as h,isDate as p,validateDateRange as b,isDateInRange as g}from"../utils/validation.js";import{useFocusManagement as y,useKeyboardNavigation as D}from"../hooks/useKeyboardNavigation.js";import{OptionsRenderer as L}from"./OptionsRenderer.js";import{SelectDatepickerContext as E}from"./SelectDatepickerContext.js";import{SelectDatepickerField as k}from"./SelectDatepickerField.js";import"./SelectDatepicker.css.js";var w=function(w){var N=w.id,C=w.className,S=w.minDate,j=w.maxDate,R=w.selectedDate,_=w.onDateChange,x=w.value,P=w.onChange,O=w.disabled,B=void 0!==O&&O,F=w.hasError,K=void 0!==F&&F,M=w.monthRef,Y=w.yearRef,I=w.dayRef,A=w.labels,U=void 0===A?{}:A,V=w.order,q=void 0===V?"month/day/year":V,z=w.reverseYears,G=w.hideLabels,H=e(w,["id","className","minDate","maxDate","selectedDate","onDateChange","value","onChange","disabled","hasError","monthRef","yearRef","dayRef","labels","order","reverseYears","hideLabels"]),J=n(-1),Q=J[0],T=J[1],W=n(-1),X=W[0],Z=W[1],$=n(-1),ee=$[0],ae=$[1],te=r(function(){return q&&h(q)?q:"month/day/year"},[q]),ne=r(function(){return te.split("/")},[te]),re=o("datepicker-".concat(Math.random().toString(36).substr(2,9))),oe=N||re.current,le=r(function(){var e={};return ne.forEach(function(a){e[a]="".concat(c,"_select-").concat(a,"-").concat(oe)}),e},[ne,oe]),ie=y(ne.map(function(e){return le[e]})),ce=D({onArrowKey:function(e){"right"===e||"down"===e?ie.focusNext():"left"!==e&&"up"!==e||ie.focusPrevious()},enabled:!B}).addKeyboardNavigation;l(function(){var e=[];return ne.forEach(function(a){var t=document.getElementById(le[a]);if(t){var n=ce(t);n&&e.push(n)}}),function(){e.forEach(function(e){return e()})}},[ne,le,ce]);var se=r(function(){return["".concat(c,"_react-select-datepicker"),C].join(" ")},[C]),ue=r(function(){return void 0!==x?x:R},[x,R]),de=r(function(){return null!=P?P:_},[P,_]);l(function(){if("production"!==process.env.NODE_ENV&&(q&&!h(q)&&console.warn('[SelectDatepicker] Invalid order "'.concat(q,'". Falling back to "month/day/year".')),P&&_&&console.warn("[SelectDatepicker] Both onChange and onDateChange provided. onChange will be used."),void 0!==x&&void 0!==R&&console.warn("[SelectDatepicker] Both value and selectedDate provided. value will be used."),de||console.warn("[SelectDatepicker] Missing onChange/onDateChange handler."),S&&!p(S)&&console.warn("[SelectDatepicker] minDate is not a valid Date instance."),j&&!p(j)&&console.warn("[SelectDatepicker] maxDate is not a valid Date instance."),S&&j&&p(S)&&p(j)&&!b(S,j)&&console.warn("[SelectDatepicker] minDate is after maxDate. Range constraints ignored."),null==R||p(R)||console.warn("[SelectDatepicker] selectedDate is not a valid Date instance."),null==U?void 0:U.months)){var e=U.months,a=Array.from({length:12},function(e,a){return a+1}).filter(function(a){return void 0===e[a]});if(a.length>0){var t=a.join(", ");console.warn("[SelectDatepicker] labels.months is missing entries for months: ".concat(t,"."))}}},[q,S,j,R,U,P,_,x,de]);var me=r(function(){return p(S)?m(S):void 0},[S]),fe=r(function(){return p(j)?m(j):void 0},[j]),ve=r(function(){return b(me,fe)},[me,fe]),he=ve?me:void 0,pe=ve?fe:void 0,be=r(function(){return t.createElement(L,{options:s(he,pe,z)})},[pe,he,z]),ge=r(function(){return t.createElement(L,{options:u(he,pe,Q,U.months)})},[pe,he,U.months,Q]),ye=r(function(){return t.createElement(L,{options:d(he,pe,X,Q)})},[pe,he,X,Q]),De=i(function(e){var a=Number(e.target.value);T(a),u(he,pe,a,U.months).some(function(e){return e.value===X})||Z(-1)},[X,he,pe,U.months]),Le=i(function(e){var a=Number(e.target.value);Z(a)},[]),Ee=i(function(e){ae(Number(e.target.value))},[]),ke=r(function(){return{baseId:oe,labels:U,hideLabels:G,disabled:B,hasError:K,day:ee,month:X,year:Q,dayOptions:ye,monthOptions:ge,yearOptions:be,dayRef:I,monthRef:M,yearRef:Y,onDayChange:Ee,onMonthChange:Le,onYearChange:De}},[oe,U,G,B,K,ee,X,Q,ye,ge,be,I,M,Y,Ee,Le,De]);l(function(){null!=ue&&p(ue)&&f(ue)?(ae(Number(ue.getDate())),Z(Number(ue.getMonth()+1)),T(Number(ue.getFullYear()))):(ae(-1),Z(-1),T(-1))},[ue]),l(function(){if(-1!==Q&&-1!==X&&-1!==ee){var e=v(Q,X,ee);g(e,he,pe)?null==de||de(e):null==de||de(null)}else null==de||de(null)},[ee,X,Q,de,he,pe]);var we=r(function(){var e,a,t;if(!K)return null;if(-1===ee&&-1===X&&-1===Q)return"Please select a date";var n=[];return-1===ee&&n.push((null===(e=U.dayLabel)||void 0===e?void 0:e.toLowerCase())||"day"),-1===X&&n.push((null===(a=U.monthLabel)||void 0===a?void 0:a.toLowerCase())||"month"),-1===Q&&n.push((null===(t=U.yearLabel)||void 0===t?void 0:t.toLowerCase())||"year"),1===n.length?"Please select a ".concat(n[0]):2===n.length?"Please select a ".concat(n[0]," and ").concat(n[1]):"Please select all date fields"},[K,ee,X,Q,U.dayLabel,U.monthLabel,U.yearLabel]),Ne="".concat(N||oe,"-legend"),Ce=Boolean(U.groupLabel||!G),Se=U.groupLabel?U.groupLabel:U.yearLabel&&U.monthLabel&&U.dayLabel?"Select ".concat(U.monthLabel,", ").concat(U.dayLabel,", and ").concat(U.yearLabel):"Select date";return t.createElement("div",a({},H,{className:se,id:N,role:"group","aria-labelledby":Ce?Ne:void 0,"aria-describedby":we?"".concat(N||oe,"-error"):void 0,"aria-invalid":K}),Ce&&t.createElement("label",{id:Ne,className:"".concat(c,"_legend")},Se),t.createElement(E.Provider,{value:ke},t.createElement("div",{className:"".concat(c,"_select-row")},ne.map(function(e,a){var n=e;return t.createElement(t.Fragment,{key:"".concat(e,"-").concat(a)},t.createElement(k,{fieldKey:n}))}))),we&&t.createElement("div",{id:"".concat(N||oe,"-error"),className:"".concat(c,"_error-message"),role:"alert","aria-live":"polite"},we))};export{w as SelectDatepicker};
+import{__rest as e,__assign as t}from"../_virtual/_tslib.js";import n,{useState as a,useRef as r,useMemo as o,useEffect as l,useCallback as i}from"react";import{classPrefix as c}from"../utils/helpers.js";import{getCachedYearsObject as s,getCachedMonthsObject as u,getCachedDaysObject as d}from"../utils/performance.js";import{normalizeToLocalMidnight as m,isValidDate as f,createSmartDate as v}from"../utils/dateUtils.js";import{isValidOrder as h,isDate as p,validateDateRange as g,isDateInRange as b}from"../utils/validation.js";import{useFocusManagement as y,useKeyboardNavigation as D}from"../hooks/useKeyboardNavigation.js";import{OptionsRenderer as L}from"./OptionsRenderer.js";import{SelectDatepickerContext as E}from"./SelectDatepickerContext.js";import{SelectDatepickerField as k}from"./SelectDatepickerField.js";import"./SelectDatepicker.css.js";var w=function(w){var N=w.id,C=w.className,S=w.minDate,j=w.maxDate,R=w.selectedDate,_=w.onDateChange,x=w.value,B=w.onChange,P=w.disabled,F=void 0!==P&&P,M=w.hasError,O=void 0!==M&&M,Y=w.monthRef,I=w.yearRef,K=w.dayRef,T=w.labels,A=void 0===T?{}:T,U=w.order,V=void 0===U?"month/day/year":U,q=w.reverseYears,z=w.hideLabels,G=e(w,["id","className","minDate","maxDate","selectedDate","onDateChange","value","onChange","disabled","hasError","monthRef","yearRef","dayRef","labels","order","reverseYears","hideLabels"]),H=a(-1),J=H[0],Q=H[1],W=a(-1),X=W[0],Z=W[1],$=a(-1),ee=$[0],te=$[1],ne=r(!1),ae=r(void 0),re=o(function(){return V&&h(V)?V:"month/day/year"},[V]),oe=o(function(){return re.split("/")},[re]),le=r("datepicker-".concat(Math.random().toString(36).substr(2,9))),ie=N||le.current,ce=o(function(){var e={};return oe.forEach(function(t){e[t]="".concat(c,"_select-").concat(t,"-").concat(ie)}),e},[oe,ie]),se=y(oe.map(function(e){return ce[e]})),ue=D({onArrowKey:function(e){"right"===e||"down"===e?se.focusNext():"left"!==e&&"up"!==e||se.focusPrevious()},enabled:!F}).addKeyboardNavigation;l(function(){var e=[];return oe.forEach(function(t){var n=document.getElementById(ce[t]);if(n){var a=ue(n);a&&e.push(a)}}),function(){e.forEach(function(e){return e()})}},[oe,ce,ue]);var de=o(function(){return["".concat(c,"_react-select-datepicker"),C].join(" ")},[C]),me=o(function(){return void 0!==x?x:R},[x,R]),fe=o(function(){return null!=B?B:_},[B,_]);l(function(){if("production"!==process.env.NODE_ENV&&(V&&!h(V)&&console.warn('[SelectDatepicker] Invalid order "'.concat(V,'". Falling back to "month/day/year".')),B&&_&&console.warn("[SelectDatepicker] Both onChange and onDateChange provided. onChange will be used."),void 0!==x&&void 0!==R&&console.warn("[SelectDatepicker] Both value and selectedDate provided. value will be used."),fe||console.warn("[SelectDatepicker] Missing onChange/onDateChange handler."),S&&!p(S)&&console.warn("[SelectDatepicker] minDate is not a valid Date instance."),j&&!p(j)&&console.warn("[SelectDatepicker] maxDate is not a valid Date instance."),S&&j&&p(S)&&p(j)&&!g(S,j)&&console.warn("[SelectDatepicker] minDate is after maxDate. Range constraints ignored."),null==R||p(R)||console.warn("[SelectDatepicker] selectedDate is not a valid Date instance."),null==A?void 0:A.months)){var e=A.months,t=Array.from({length:12},function(e,t){return t+1}).filter(function(t){return void 0===e[t]});if(t.length>0){var n=t.join(", ");console.warn("[SelectDatepicker] labels.months is missing entries for months: ".concat(n,"."))}}},[V,S,j,R,A,B,_,x,fe]);var ve=o(function(){return p(S)?m(S):void 0},[S]),he=o(function(){return p(j)?m(j):void 0},[j]),pe=o(function(){return g(ve,he)},[ve,he]),ge=pe?ve:void 0,be=pe?he:void 0,ye=o(function(){return n.createElement(L,{options:s(ge,be,q)})},[be,ge,q]),De=o(function(){return n.createElement(L,{options:u(ge,be,J,A.months)})},[be,ge,A.months,J]),Le=o(function(){return n.createElement(L,{options:d(ge,be,X,J)})},[be,ge,X,J]),Ee=i(function(e){var t=Number(e.target.value);Q(t),u(ge,be,t,A.months).some(function(e){return e.value===X})||Z(-1)},[X,ge,be,A.months]),ke=i(function(e){var t=Number(e.target.value);Z(t)},[]),we=i(function(e){te(Number(e.target.value))},[]);l(function(){var e=me&&p(me)&&f(me)?me.getTime():null;ae.current!==e&&(ae.current=e,null!==e&&me?(ne.current=!0,te(Number(me.getDate())),Z(Number(me.getMonth()+1)),Q(Number(me.getFullYear()))):(ne.current=!0,te(-1),Z(-1),Q(-1)))},[me]),l(function(){if(ne.current){var e=me&&p(me)&&f(me)?me.getFullYear()===J&&me.getMonth()+1===X&&me.getDate()===ee:-1===ee&&-1===X&&-1===J;if(ne.current=!1,e)return}if(-1!==J&&-1!==X&&-1!==ee){var t=v(J,X,ee),n=me&&p(me)&&f(me)?me.getTime():null;if(b(t,ge,be))n!==t.getTime()&&(null==fe||fe(t));else null!==n&&(null==fe||fe(null))}},[ee,X,J,fe,ge,be,me]);var Ne=o(function(){var e,t,n;if(!O)return null;if(-1===ee&&-1===X&&-1===J)return"Please select a date";var a=[];return-1===ee&&a.push((null===(e=A.dayLabel)||void 0===e?void 0:e.toLowerCase())||"day"),-1===X&&a.push((null===(t=A.monthLabel)||void 0===t?void 0:t.toLowerCase())||"month"),-1===J&&a.push((null===(n=A.yearLabel)||void 0===n?void 0:n.toLowerCase())||"year"),0===a.length?null:1===a.length?"Please select a ".concat(a[0]):2===a.length?"Please select a ".concat(a[0]," and ").concat(a[1]):"Please select all date fields"},[O,ee,X,J,A.dayLabel,A.monthLabel,A.yearLabel]),Ce=o(function(){return{baseId:ie,labels:A,hideLabels:z,disabled:F,hasError:O,isInvalid:Boolean(Ne),day:ee,month:X,year:J,dayOptions:Le,monthOptions:De,yearOptions:ye,dayRef:K,monthRef:Y,yearRef:I,onDayChange:we,onMonthChange:ke,onYearChange:Ee}},[ie,A,z,F,O,Ne,ee,X,J,Le,De,ye,K,Y,I,we,ke,Ee]),Se="".concat(N||ie,"-legend"),je=Boolean(A.groupLabel||!z),Re=A.groupLabel?A.groupLabel:A.yearLabel&&A.monthLabel&&A.dayLabel?"Select ".concat(A.monthLabel,", ").concat(A.dayLabel,", and ").concat(A.yearLabel):"Select date";return n.createElement("fieldset",t({},G,{className:de,id:N,"aria-describedby":Ne?"".concat(N||ie,"-error"):void 0,"aria-invalid":Boolean(Ne)}),je&&n.createElement("legend",{id:Se,className:"".concat(c,"_legend")},Re),n.createElement(E.Provider,{value:Ce},n.createElement("div",{className:"".concat(c,"_select-row")},oe.map(function(e,t){var a=e;return n.createElement(n.Fragment,{key:"".concat(e,"-").concat(t)},n.createElement(k,{fieldKey:a}))}))),Ne&&n.createElement("div",{id:"".concat(N||ie,"-error"),className:"".concat(c,"_error-message"),role:"alert","aria-live":"polite"},Ne))};export{w as SelectDatepicker};

package/dist/components/SelectDatepickerField.js

@@ -1 +1 @@
-import e,{useContext as a}from"react";import{SelectRenderer as n}from"./SelectRenderer.js";import{SelectDatepickerContext as r}from"./SelectDatepickerContext.js";var l=function(l){var o=l.fieldKey,t=a(r);if(!t)throw new Error("SelectDatepickerField must be used within SelectDatepickerContext");var d=t.baseId,i=t.labels,h=t.hideLabels,c=t.disabled,s=t.hasError,m=t.day,p=t.month,y=t.year,b=t.dayOptions,f=t.monthOptions,u=t.yearOptions,C=t.dayRef,v=t.monthRef,g=t.yearRef,S=t.onDayChange,D=t.onMonthChange,H=t.onYearChange,L={day:{id:"day-".concat(d),value:m,labels:{hide:h,main:i.dayLabel||"Day",placeholder:i.dayPlaceholder||"Select Day"},options:b,onChangeHandler:S,ref:C},month:{id:"month-".concat(d),value:p,labels:{hide:h,main:i.monthLabel||"Month",placeholder:i.monthPlaceholder||"Select Month"},options:f,onChangeHandler:D,ref:v},year:{id:"year-".concat(d),value:y,labels:{hide:h,main:i.yearLabel||"Year",placeholder:i.yearPlaceholder||"Select Year"},options:u,onChangeHandler:H,ref:g}}[o];return e.createElement(n,{id:L.id,labels:L.labels,value:L.value,disabled:c,onChangeHandler:L.onChangeHandler,selectOptions:L.options,ref:L.ref,required:!0,invalid:s})};export{l as SelectDatepickerField};
+import e,{useContext as a}from"react";import{SelectRenderer as n}from"./SelectRenderer.js";import{SelectDatepickerContext as l}from"./SelectDatepickerContext.js";var o=function(o){var r=o.fieldKey,t=a(l);if(!t)throw new Error("SelectDatepickerField must be used within SelectDatepickerContext");var d=t.baseId,i=t.labels,h=t.hideLabels,c=t.disabled,s=t.isInvalid,m=t.day,p=t.month,y=t.year,b=t.dayOptions,f=t.monthOptions,u=t.yearOptions,v=t.dayRef,C=t.monthRef,g=t.yearRef,S=t.onDayChange,D=t.onMonthChange,H=t.onYearChange,L={day:{id:"day-".concat(d),value:m,labels:{hide:h,main:i.dayLabel||"Day",placeholder:i.dayPlaceholder||"Select Day"},options:b,onChangeHandler:S,ref:v},month:{id:"month-".concat(d),value:p,labels:{hide:h,main:i.monthLabel||"Month",placeholder:i.monthPlaceholder||"Select Month"},options:f,onChangeHandler:D,ref:C},year:{id:"year-".concat(d),value:y,labels:{hide:h,main:i.yearLabel||"Year",placeholder:i.yearPlaceholder||"Select Year"},options:u,onChangeHandler:H,ref:g}}[r];return e.createElement(n,{id:L.id,labels:L.labels,value:L.value,disabled:c,onChangeHandler:L.onChangeHandler,selectOptions:L.options,ref:L.ref,required:!0,invalid:s})};export{o as SelectDatepickerField};

package/dist/components/SelectRenderer.css.js

@@ -1 +1 @@
-import r from"../node_modules/style-inject/dist/style-inject.es.js";var e=".rsd__select-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.rsd__label {\r\n  margin-bottom: var(--rsd-label-margin-bottom);\r\n}\r\n\r\n.rsd__select {\r\n  padding: var(--rsd-select-padding);\r\n  border: var(--rsd-select-border);\r\n  border-radius: var(--rsd-select-border-radius);\r\n  font-size: var(--rsd-select-font-size);\r\n}\r\n\r\n.rsd__select:disabled {\r\n  background: var(--rsd-select-disabled-bg);\r\n  color: var(--rsd-select-disabled-color);\r\n}\r\n\r\n.rsd__required-indicator {\r\n  color: var(--rsd-required-color);\r\n  margin-left: var(--rsd-required-margin-left);\r\n}\r\n";r(e);export{e as default};
+import r from"../node_modules/style-inject/dist/style-inject.es.js";var e=".rsd__select-container {\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n\r\n.rsd__label {\r\n  margin-bottom: var(--rsd-label-margin-bottom);\r\n}\r\n\r\n.rsd__sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  padding: 0;\r\n  margin: -1px;\r\n  overflow: hidden;\r\n  clip: rect(0, 0, 0, 0);\r\n  white-space: nowrap;\r\n  border: 0;\r\n}\r\n\r\n.rsd__select {\r\n  padding: var(--rsd-select-padding);\r\n  border: var(--rsd-select-border);\r\n  border-radius: var(--rsd-select-border-radius);\r\n  font-size: var(--rsd-select-font-size);\r\n  font-family: var(--rsd-select-font-family);\r\n  line-height: var(--rsd-select-line-height);\r\n}\r\n\r\n.rsd__select:not(:disabled):hover {\r\n  border-color: var(--rsd-select-hover-border);\r\n}\r\n\r\n.rsd__select:focus-visible {\r\n  outline: none;\r\n  border-color: var(--rsd-select-focus-border);\r\n  box-shadow: var(--rsd-select-focus-ring);\r\n}\r\n\r\n.rsd__select:disabled {\r\n  background: var(--rsd-select-disabled-bg);\r\n  color: var(--rsd-select-disabled-color);\r\n}\r\n\r\n.rsd__required-indicator {\r\n  color: var(--rsd-required-color);\r\n  margin-left: var(--rsd-required-margin-left);\r\n}\r\n";r(e);export{e as default};

package/dist/components/SelectRenderer.js

@@ -1 +1 @@
-import e from"react";import{classPrefix as a}from"../utils/helpers.js";import"./SelectRenderer.css.js";var c=function(c){var l=c.id,t=c.labels,n=c.value,r=c.disabled,i=c.onChangeHandler,o=c.selectOptions,s=c.ref,d=c.required,m=void 0!==d&&d,b=c.invalid,v=void 0!==b&&b,u="".concat(a,"_select-").concat(l),p="".concat(a,"_label-").concat(l);return e.createElement("div",{className:"".concat(a,"_select-container ").concat(a,"_select-container-").concat(l)},!t.hide&&e.createElement("label",{id:p,htmlFor:u,className:"".concat(a,"_label ").concat(a,"_label-").concat(l)},t.main,m&&e.createElement("span",{"aria-label":"required",className:"".concat(a,"_required-indicator")},"*")),e.createElement("select",{id:u,value:n,disabled:r,onChange:i,ref:s,className:"".concat(a,"_select ").concat(a,"_select-").concat(l),required:m,"aria-invalid":v,"aria-labelledby":t.hide?void 0:p},e.createElement("option",{value:-1,disabled:!0},t.placeholder),o))};export{c as SelectRenderer};
+import e from"react";import{classPrefix as a}from"../utils/helpers.js";import"./SelectRenderer.css.js";var c=function(c){var l=c.id,t=c.labels,n=c.value,r=c.disabled,o=c.onChangeHandler,i=c.selectOptions,s=c.ref,d=c.required,m=void 0!==d&&d,b=c.invalid,u=void 0!==b&&b,v="".concat(a,"_select-").concat(l),_="".concat(a,"_label-").concat(l),p=["".concat(a,"_label"),"".concat(a,"_label-").concat(l),t.hide?"".concat(a,"_sr-only"):""].filter(Boolean).join(" ");return e.createElement("div",{className:"".concat(a,"_select-container ").concat(a,"_select-container-").concat(l)},e.createElement("label",{id:_,htmlFor:v,className:p},t.main,m&&e.createElement("span",{"aria-label":"required",className:"".concat(a,"_required-indicator")},"*")),e.createElement("select",{id:v,value:n,disabled:r,onChange:o,ref:s,className:"".concat(a,"_select ").concat(a,"_select-").concat(l),required:m,"aria-invalid":u,"aria-labelledby":_},e.createElement("option",{value:-1,disabled:!0},t.placeholder),i))};export{c as SelectRenderer};

package/dist/hooks/useKeyboardNavigation.js

@@ -1 +1 @@
-import{useCallback as e,useRef as n}from"react";var r=function(n){void 0===n&&(n={});var r=n.onEnter,t=n.onEscape,o=n.onArrowKey,c=n.onTab,u=n.enabled,a=void 0===u||u,f=e(function(e){if(a)switch(e.key){case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"ArrowDown":e.preventDefault();var n=e.key.replace("Arrow","").toLowerCase();null==o||o(n);break;case"Enter":e.preventDefault(),null==r||r();break;case"Escape":e.preventDefault(),null==t||t();break;case"Tab":null==c||c(e.shiftKey)}},[a,r,t,o,c]);return{addKeyboardNavigation:e(function(e){if(e&&a)return e.addEventListener("keydown",f),function(){e.removeEventListener("keydown",f)}},[f,a])}},t=function(r){var t=n(0),o=e(function(e){var n=document.getElementById(r[e]);n&&n instanceof HTMLSelectElement&&(n.focus(),t.current=e)},[r]),c=e(function(){var e=(t.current+1)%r.length;o(e)},[r.length,o]),u=e(function(){var e=0===t.current?r.length-1:t.current-1;o(e)},[r.length,o]),a=e(function(){o(0)},[o]),f=e(function(){o(r.length-1)},[r.length,o]),i=e(function(e){var n=r.indexOf(e);-1!==n&&(t.current=n)},[r]);return{focusNext:c,focusPrevious:u,focusFirst:a,focusLast:f,focusElement:o,updateCurrentFocusIndex:i,currentFocusIndex:t.current}};export{t as useFocusManagement,r as useKeyboardNavigation};
+import{useCallback as e,useRef as n}from"react";var r=function(n){void 0===n&&(n={});var r=n.onEnter,t=n.onEscape,o=n.onArrowKey,c=n.onTab,u=n.enabled,a=void 0===u||u,f=e(function(e){if(a)switch(e.key){case"ArrowLeft":case"ArrowRight":e.preventDefault();var n=e.key.replace("Arrow","").toLowerCase();null==o||o(n);break;case"ArrowUp":case"ArrowDown":break;case"Enter":e.preventDefault(),null==r||r();break;case"Escape":e.preventDefault(),null==t||t();break;case"Tab":null==c||c(e.shiftKey)}},[a,r,t,o,c]);return{addKeyboardNavigation:e(function(e){if(e&&a)return e.addEventListener("keydown",f),function(){e.removeEventListener("keydown",f)}},[f,a])}},t=function(r){var t=n(0),o=e(function(e){var n=document.getElementById(r[e]);n&&n instanceof HTMLSelectElement&&(n.focus(),t.current=e)},[r]),c=e(function(){var e=(t.current+1)%r.length;o(e)},[r.length,o]),u=e(function(){var e=0===t.current?r.length-1:t.current-1;o(e)},[r.length,o]),a=e(function(){o(0)},[o]),f=e(function(){o(r.length-1)},[r.length,o]),i=e(function(e){var n=r.indexOf(e);-1!==n&&(t.current=n)},[r]);return{focusNext:c,focusPrevious:u,focusFirst:a,focusLast:f,focusElement:o,updateCurrentFocusIndex:i,currentFocusIndex:t.current}};export{t as useFocusManagement,r as useKeyboardNavigation};

package/dist/src/components/SelectDatepickerContext.d.ts

@@ -7,6 +7,7 @@ export interface SelectDatepickerContextValue {
     hideLabels?: boolean;
     disabled?: boolean;
     hasError?: boolean;
+    isInvalid?: boolean;
     day: number;
     month: number;
     year: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-select-datepicker",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "A simple and reusable dropdown datepicker component for React",
   "author": "JMcAmmond",
   "license": "MIT",