@salesforce-ux/design-system/__internal/chunked/docs/ui/components/datepickers/docs.mdx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,a,l={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},7843:function(e,t,a){a.r(t),a.d(t,{getContents:function(){return Y},getElement:function(){return B}});var l=a(1594),n=a.n(l),d=a(5671),r=a(6547),i=(a(2436),a(9582),a(5619)),s=a(9741),c=a(806),o=a(942),u=a.n(o),m=a(6955),f=a(188),p=a(2711),h=a(5526),g="date-input-id",b="height: 25rem;",y="Format: ".concat("12/31/2024"),E=function(e){return n().createElement("div",{"aria-hidden":"false","aria-label":"Date picker: June",className:u()("slds-datepicker",e.className),role:"dialog"},e.children,n().createElement("button",{className:"slds-button slds-align_absolute-center slds-text-link"},"Today"))},k=function(e){return n().createElement("div",{className:"slds-datepicker__filter slds-grid"},n().createElement("div",{className:"slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow"},n().createElement("div",{className:"slds-align-middle"},n().createElement(m.A,{assistiveText:"Previous Month",className:"slds-button_icon-container",symbol:"left",title:"Previous Month"})),n().createElement("h2",{"aria-atomic":"false","aria-live":"polite",className:"slds-align-middle",id:"".concat(e.idPrefix,"-month")},"June"),n().createElement("div",{className:"slds-align-middle"},n().createElement(m.A,{assistiveText:"Next Month",className:"slds-button_icon-container",symbol:"right",title:"Next Month"}))),n().createElement("div",{className:"slds-shrink-none"},n().createElement("label",{className:"slds-assistive-text",htmlFor:"".concat(e.idPrefix,"_select")},"Pick a Year"),n().createElement(f.l6,{id:"".concat(e.idPrefix,"_select")},n().createElement("option",null,"2021"),n().createElement("option",null,"2022"),n().createElement("option",null,"2023"))))},w=function(e){return n().createElement("tr",{id:"".concat(e.idPrefix,"-weekdays")},n().createElement("th",{id:"".concat(e.idPrefix,"-Sunday"),scope:"col"},n().createElement("abbr",{title:"Sunday"},"Sun")),n().createElement("th",{id:"".concat(e.idPrefix,"-Monday"),scope:"col"},n().createElement("abbr",{title:"Monday"},"Mon")),n().createElement("th",{id:"".concat(e.idPrefix,"-Tuesday"),scope:"col"},n().createElement("abbr",{title:"Tuesday"},"Tue")),n().createElement("th",{id:"".concat(e.idPrefix,"-Wednesday"),scope:"col"},n().createElement("abbr",{title:"Wednesday"},"Wed")),n().createElement("th",{id:"".concat(e.idPrefix,"-Thursday"),scope:"col"},n().createElement("abbr",{title:"Thursday"},"Thu")),n().createElement("th",{id:"".concat(e.idPrefix,"-Friday"),scope:"col"},n().createElement("abbr",{title:"Friday"},"Fri")),n().createElement("th",{id:"".concat(e.idPrefix,"-Saturday"),scope:"col"},n().createElement("abbr",{title:"Saturday"},"Sat")))},S=function(e){return n().createElement("tr",e,e.children)},_=function(e){return n().createElement("td",{"aria-disabled":e["aria-disabled"],"aria-selected":e["aria-selected"],"aria-current":e["aria-current"],className:u()(e.className,{"slds-day_adjacent-month":e.isAdjacentMonth}),role:"gridcell",tabIndex:e.tabIndex,"aria-label":e["aria-label"]},n().createElement("span",{className:"slds-day"},e.children))},v=function(e){return n().createElement(E,{className:"slds-dropdown slds-dropdown_left"},n().createElement(k,{idPrefix:e.idPrefix}),n().createElement("table",{"aria-multiselectable":"true",className:"slds-datepicker__month",role:"grid"},n().createElement("thead",null,n().createElement(w,{idPrefix:e.idPrefix})),n().createElement("tbody",null,n().createElement(S,null,n().createElement(_,{"aria-selected":"false",isAdjacentMonth:!0,"aria-label":"31 May 2020"},"31"),n().createElement(_,{"aria-selected":"false",tabIndex:"0","aria-label":"1 June 2020"},"1"),n().createElement(_,{"aria-selected":"false","aria-label":"2 June 2020"},"2"),n().createElement(_,{"aria-selected":"false","aria-label":"3 June 2020"},"3"),n().createElement(_,{"aria-selected":"false","aria-label":"4 June 2020"},"4"),n().createElement(_,{"aria-selected":"false","aria-label":"5 June 2020"},"5"),n().createElement(_,{"aria-selected":"false","aria-label":"6 June 2020"},"6")),n().createElement(S,null,n().createElement(_,{"aria-selected":"false","aria-label":"7 June 2020"},"7"),n().createElement(_,{"aria-selected":"false","aria-label":"8 June 2020"},"8"),n().createElement(_,{"aria-selected":"false","aria-label":"9 June 2020"},"9"),n().createElement(_,{"aria-selected":"false","aria-label":"10 June 2020"},"10"),n().createElement(_,{"aria-selected":"false","aria-label":"11 June 2020"},"11"),n().createElement(_,{"aria-selected":"false","aria-label":"12 June 2020"},"12"),n().createElement(_,{"aria-selected":"false","aria-label":"13 June 2020"},"13")),n().createElement(S,null,n().createElement(_,{"aria-selected":"false","aria-label":"14 June 2020"},"14"),n().createElement(_,{"aria-selected":"false","aria-label":"15 June 2020"},"15"),n().createElement(_,{"aria-selected":"false","aria-label":"16 June 2020"},"16"),n().createElement(_,{"aria-selected":"false","aria-label":"17 June 2020"},"17"),n().createElement(_,{"aria-selected":"false","aria-current":e.todayActive?"date":null,className:e.todayActive?"slds-is-today":null,"aria-label":"18 June 2020"},"18"),n().createElement(_,{"aria-selected":"false","aria-label":"19 June 2020"},"19"),n().createElement(_,{"aria-selected":"false","aria-label":"20 June 2020"},"20")),n().createElement(S,{className:u()({"slds-has-multi-selection":"week-4"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},n().createElement(_,{"aria-selected":"false","aria-label":"21 June 2020"},"21"),n().createElement(_,{"aria-selected":"false","aria-label":"22 June 2020"},"22"),n().createElement(_,{"aria-selected":"false","aria-label":"23 June 2020"},"23"),n().createElement(_,{"aria-selected":!e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected":"single"===e.dateSelected&&("week-4"===e.dateRange||"week-4-5"===e.dateRange),"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-4"===e.dateRange||"week-4-5"===e.dateRange)}),"aria-label":"24 June 2020"},"24"),n().createElement(_,{"aria-selected":"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-4"===e.dateRange||"week-4-5"===e.dateRange),"slds-is-today":e.todayActiveInRange}),"aria-label":"25 June 2020","aria-current":e.todayActiveInRange?"date":null},"25"),n().createElement(_,{"aria-selected":"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"26 June 2020"},"26"),n().createElement(_,{"aria-selected":"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"27 June 2020"},"27")),n().createElement(S,{className:u()({"slds-has-multi-selection":"week-5"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},n().createElement(_,{"aria-selected":!e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:u()({"slds-is-selected":"single"===e.dateSelected&&"week-5"===e.dateRange,"slds-is-selected slds-is-selected-multi":"single"!==e.dateSelected&&("week-5"===e.dateRange||"week-4-5"===e.dateRange)}),"aria-label":"28 June 2020"},"28"),n().createElement(_,{"aria-selected":"single"===e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"29 June 2020"},"29"),n().createElement(_,{"aria-selected":"single"===e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:"single"===e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?null:"slds-is-selected slds-is-selected-multi","aria-label":"30 June 2020"},"30"),n().createElement(_,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"1 July 2020"},"1"),n().createElement(_,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"2 July 2020"},"2"),n().createElement(_,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"3 July 2020"},"3"),n().createElement(_,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:u()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"4 July 2020"},"4")))))},D=function(e){return n().createElement(p.ZS,{formElementClassName:"slds-dropdown-trigger slds-dropdown-trigger_click"+(null!=e&&e.isOpen?" slds-is-open":""),labelContent:e.labelContent,inputId:e.dateInputId,hasRightIcon:!0,hasError:e.hasError,isRequired:e.isRequired,isDisabled:e.isDisabled,hasTooltip:e.hasTooltip,showTooltip:e.showTooltip,fieldLevelMessage:e.fieldLevelMessage,inlineMessage:!e.hasError&&e.dateFormat,hasHiddenInlineMessage:!e.showDateFormat,dropdown:!e.isDisabled&&n().createElement(v,{idPrefix:e.idPrefix,todayActive:e.todayActive,todayActiveInRange:e.todayActiveInRange,dateSelected:e.dateSelected,dateRange:e.dateRange,dateRangeMulti:e.dateRangeMulti})},n().createElement(h.A,{id:e.dateInputId,placeholder:" ",defaultValue:e.defaultValue,required:e.isRequired,disabled:e.isDisabled}),n().createElement(m.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:e.isDisabled}))},R=[{id:"default",label:"Base – default",demoStyles:b,element:n().createElement(D,{idPrefix:"defaultPicker",labelContent:"Date",dateInputId:g+"-default",isOpen:!0,todayActive:!0,dateFormat:y})}],x=[{id:"datepicker-day-selected",label:"Date selected",demoStyles:b,element:n().createElement(D,{idPrefix:"pickerDaySelected",labelContent:"Date",dateInputId:g+"-day_selected",isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021",dateFormat:y})},{id:"datepicker-with-error",label:"Date Picker has Error",demoStyles:b,element:n().createElement(D,{idPrefix:"pickerWithError",labelContent:"Date",dateInputId:g+"-error",isOpen:!0,todayActive:!0,hasError:!0})},{id:"datepicker-required",label:"Date Picker - required",demoStyles:b,element:n().createElement(D,{idPrefix:"pickerRequired",labelContent:"Date",dateInputId:g+"-required",isOpen:!0,todayActive:!0,isRequired:!0,dateFormat:y})},{id:"datepicker-required-with-error",label:"Date Picker - required with error",demoStyles:b,element:n().createElement(D,{idPrefix:"pickerRequired",labelContent:"Date",dateInputId:g+"-required",isOpen:!0,todayActive:!0,isRequired:!0,hasError:!0})},{id:"datepicker-with-tooltip",label:"Date Picker - With tooltip",demoStyles:b,element:n().createElement(D,{idPrefix:"pickerRequired",labelContent:"Date",dateInputId:g+"-required",todayActive:!0,isRequired:!0,isOpen:!0,defaultValue:"Jan 1 2023",fieldLevelMessage:"Format: mmm d yyyy | ex: Jan 1 2023",hasTooltip:!0,showTooltip:!0,dateFormat:y})},{id:"datepicker-disabled",label:"Datepicker - disabled",demoStyles:"height: 8rem;",storybookStyles:!0,element:n().createElement(D,{idPrefix:"pickerDisabled",labelContent:"Date",dateInputId:g+"-table",isDisabled:!0,dateFormat:y})},{id:"date-format-visible",label:"Date Picker - date format visible",demoStyles:"height: 6rem;",element:n().createElement(D,{idPrefix:"pickerDateFormatVisible",labelContent:"Date",dateInputId:g+"-date-format-visible",dateFormat:y,showDateFormat:!0})}],P="date-input-id-01",I="date-input-id-02",A="height: 25rem;",N=function(e){return n().createElement("div",{className:"slds-form slds-form_compound"},n().createElement("fieldset",{className:"slds-form-element"},n().createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},"Start and End Date"),n().createElement("div",{className:"slds-form-element__control"},n().createElement("div",{className:"slds-form-element__group"},n().createElement("div",{className:"slds-form-element__row"},e.children)))))},O=[{id:"default",label:"Base - Default",demoStyles:A,element:n().createElement(N,null,n().createElement(D,{idPrefix:"rangeDefault_start",labelContent:"Start Date",dateInputId:"".concat(P,"-default"),isOpen:!0,todayActive:!0,dateFormat:y}),n().createElement(D,{idPrefix:"rangeDefault_end",labelContent:"End Date",dateInputId:"".concat(I,"-default"),dateFormat:y}))}],M=[{id:"start-date",label:"Start date selected",demoStyles:A,element:n().createElement(N,null,n().createElement(D,{idPrefix:"rangeSelected_start",labelContent:"Start Date",dateInputId:"".concat(P,"-start_selected"),isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021",dateFormat:y}),n().createElement(D,{idPrefix:"rangeSelected_end",labelContent:"End Date",dateInputId:"".concat(I,"-start_selected"),dateFormat:y}))},{id:"end-date-week",label:"End date selected (Same week)",demoStyles:A,element:n().createElement(N,null,n().createElement(D,{idPrefix:"rangeWeekSame_start",labelContent:"Start Date",dateInputId:"".concat(P,"-end_selected"),defaultValue:"06/24/2021",dateFormat:y}),n().createElement(D,{idPrefix:"rangeWeekSame_end",labelContent:"End Date",dateInputId:"".concat(I,"-end_selected"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4",defaultValue:"06/27/2020",dateFormat:y}))},{id:"end-date-weeks",label:"End date selected (Different week)",demoStyles:A,element:n().createElement(N,null,n().createElement(D,{idPrefix:"rangeWeekDiff_start",labelContent:"Start Date",dateInputId:"".concat(P,"-end_selected_diff_week"),defaultValue:"06/24/2021",dateFormat:y}),n().createElement(D,{idPrefix:"rangeWeekDiff_end",labelContent:"End Date",dateInputId:"".concat(I,"-end_selected_diff_week"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020",dateFormat:y}))},{id:"today-in-range",label:"Today - In selected range",demoStyles:A,element:n().createElement(N,null,n().createElement(D,{idPrefix:"rangeToday_start",labelContent:"Start Date",dateInputId:"".concat(P,"-today_in_range"),defaultValue:"06/24/2021",dateFormat:y}),n().createElement(D,{idPrefix:"rangeToday_end",labelContent:"End Date",dateInputId:"".concat(I,"-today_in_range"),isOpen:!0,todayActiveInRange:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020",dateFormat:y}))},{id:"span-across-month-in-range",label:"Current and adjacent month in selected range",demoStyles:A,element:n().createElement(N,null,n().createElement(D,{idPrefix:"rangeSpanMonth_start",labelContent:"Start Date",dateInputId:"".concat(P,"-adjacent_month"),defaultValue:"06/28/2020",dateFormat:y}),n().createElement(D,{idPrefix:"rangeSpanMonth_end",labelContent:"End Date",dateInputId:"".concat(I,"-adjacent_month"),isOpen:!0,dateSelected:!0,dateRange:"week-5",defaultValue:"07/04/2020",dateFormat:y}))}],J=("".concat(P,"-default"),"".concat(I,"-default"),"".concat(P,"-table-start_selected"),"".concat(I,"-table-start_selected"),"".concat(P,"-table-end_selected"),"".concat(I,"-table-end_selected"),"".concat(P,"-table-end_selected_diff_week"),"".concat(I,"-table-end_selected_diff_week"),"".concat(P,"-table-today_in_range"),"".concat(I,"-table-today_in_range"),"".concat(P,"-table-adjacent_month"),"".concat(I,"-table-adjacent_month"),d.XB.a),T=d.XB.code,q=d.XB.h2,j=d.XB.h3,F=d.XB.h4,C=d.XB.li,V=d.XB.p,G=d.XB.strong,W=d.XB.ul,B=function(){return(0,l.createElement)(d.Ay,{},(0,l.createElement)("div",{className:"doc lead"},"A datepicker is a text input to capture a date. You can select a single date, date range or date and time."),(0,l.createElement)(r.A,{exampleOnly:!0,demoStyles:(0,c.GP)(R)},(0,c.NO)(R)),q({id:"About-Datepickers"},"About Datepickers"),j({id:"Implementation"},"Implementation"),V({},"The datepicker is a ",J({href:"/components/form-element"},"form element"),", containing a label and text ",J({href:"/components/input"},"input"),", and a dropdown ",J({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The form element acts as a trigger for the dropdown."),(0,l.createElement)(i.A,{type:"warning"},(0,l.createElement)("p",null,"Placement of inline form elements inside a data table cell is not supported. Instead, use a button to invoke a popover, which does support form elements.")),V({},"The datepicker has the following markup requirements:"),V({},G({},"Desktop:")),W({},C({},"Add ",T({},".slds-is-open")," to the element with ",T({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker."),C({},"The ",T({},".slds-is-selected")," modifier class is required on the ",T({},"td")," element that has the selected day."),C({},"The ",T({},".slds-is-today")," modifier class is required on the ",T({},"td")," element that is the current day."),C({},"The ",T({},".slds-has-multi-selection")," modifier class is required on the ",T({},"tr")," element that contains multiple days selected in the ",G({},"same")," week."),C({},"The ",T({},".slds-has-multi-row-selection")," modifier class is required on any ",T({},"tr")," element that contains multiple days selected in the ",G({},"multiple")," weeks."),C({},"The ",T({},".slds-is-selected-multi")," modifier class is required on the ",T({},"td")," element that contains a selected day within a range.")),V({},G({},"Mobile:")),W({},C({},"When on mobile, we want to leverage the native date picker by changing the ",T({},"input")," type from ",T({},"text")," to ",T({},"date")),C({},"The ",T({},'input type="date"')," will create an input field allowing a date and time to be easily entered — this includes year, month, day."),C({},"When switching ",T({},'input type="text"')," to ",T({},'input type="date"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",W({},C({},"On the element with the class ",T({},"slds-combobox"),", please remove ",T({},'role="combobox"'),", ",T({},"aria-expanded"),", and ",T({},"aria-haspopup"),"."),C({},"On the ",T({},"input")," that we just added ",T({},'type="date"')," to, please remove ",T({},"aria-controls"),", ",T({},"aria-autocomplete"),", and ",T({},'role="textbox"'),".")))),j({id:"Accessibility"},"Accessibility"),V({},"To display the datepicker text input field and calendar date picker with maximum accessibility, datepicker should be empty to start. When a user begins typing, text input is activated, and the full date format for the user’s locale, such as text DD MM YYYY in the en_US_locale."),F({id:"Markup"},"Markup"),V({},G({},"Dialog:")),W({},C({},"Should act as a focus trap so the user only cycles through the datepicker ",T({},"dialog")," when the datepicker is open"),C({},"A Date Format Visible variation displays a message about the expected date format. When the date field receives focus, a message appears under the field to show the expected date format. When focus is removed from the date field, the message is hidden and available as assistive text."),C({},"All datepicker fields marked as required with an * must have an accompanying legend. Example:\n",(0,l.createElement)(s.A,null))),V({},G({},"Grid:")),W({},C({},"Table must be labelled with ",T({},'role="grid"')," and be appropriately labelled with ",T({},"aria-labelledby")),C({},"Use ",T({},'aria-multiselectable="true"')," to allow for selection of multiple days"),C({},"Should act as a single focus stop")),V({},G({},"Gridcell:")),W({},C({},"All dates should have ",T({},'role="gridcell"')," and ",T({},'aria-selected="false"')," on the ",T({},"gridcell")," by default"),C({},"If a date is selected, ",T({},"aria-selected")," should be set to ",T({},"true")," on the corresponding ",T({},"gridcell")),C({},T({},"aria-current")," is used to indicate which day is today and should be set to ",T({},'aria-current="date"')),C({},T({},"aria-label")," is used to provide the full ",T({},"DD MM YYYY")," text of the date")),V({},G({},"Opening the Datepicker:")),W({},C({},"Mouse user: open the datepicker when a mouse user clicks on the input"),C({},"Keyboard user: only open the datepicker when a keyboard user presses ",T({},"enter")," or ",T({},"space")," on the datepicker button",W({},C({},"Do not open the datepicker when user focus is on the input")))),V({},G({},"Closing the Datepicker:")),W({},C({},"Keyboard user: after closing the calendar, the focus should go to the input. The focus on input directs screen reader to output the selected date.",W({},C({},"The focus should not go on the calendar icon button that triggered the calendar to open.")))),F({id:"Keyboard-Interactions"},"Keyboard Interactions"),W({},C({},"When the datepicker opens, place user focus on either the currently selected date in the grid or if no date is selected the current day"),C({},T({},"left")," and ",T({},"right")," arrow keys to navigate row"),C({},T({},"up")," and ",T({},"down")," arrow keys to navigate between weeks on the same day"),C({},T({},"home")," and ",T({},"end")," keys to jump to beginning or end of current row"),C({},T({},"pagedown")," and ",T({},"pageup")," to navigate between months"),C({},T({},"alt + pagedown")," and ",T({},"alt + pageup")," to navigate between years"),C({},T({},"enter")," to select date and close datepicker"),C({},T({},"esc")," to close datepicker without choosing a date")),q({id:"Base"},"Base"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(R)},(0,c.NO)(R)),j({id:"States"},"States"),F({id:"Date-Selected"},"Date Selected"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(x,"datepicker-day-selected")},(0,c.NO)(x,"datepicker-day-selected")),F({id:"Date-Picker-Has-Error"},"Date Picker Has Error"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(x,"datepicker-with-error")},(0,c.NO)(x,"datepicker-with-error")),F({id:"Date-Required"},"Date Required"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(x,"datepicker-required")},(0,c.NO)(x,"datepicker-required")),F({id:"Date-Required-Date-Picker-Has-Error"},"Date Required, Date Picker Has Error"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(x,"datepicker-required-with-error")},(0,c.NO)(x,"datepicker-required-with-error")),j({id:"Date-Format-Visible"},"Date Format Visible"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(x,"date-format-visible")},(0,c.NO)(x,"date-format-visible")),q({id:"Range"},"Range"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(O)},(0,c.NO)(O)),j({id:"States-2"},"States"),F({id:"Start-Date-Selected"},"Start Date Selected"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(M,"start-date")},(0,c.NO)(M,"start-date")),F({id:"End-date-selected-(Same-week)"},"End date selected (Same week)"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(M,"end-date-week")},(0,c.NO)(M,"end-date-week")),F({id:"End-date-selected-(Different-week)"},"End date selected (Different week)"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(O)},(0,c.NO)(O)),F({id:"Today-In-selected-range"},"Today - In selected range"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(O)},(0,c.NO)(O)),F({id:"Current-And-Adjacent-Month-In-Selected-Range"},"Current And Adjacent Month In Selected Range"),(0,l.createElement)(r.A,{demoStyles:(0,c.GP)(O)},(0,c.NO)(O)))},Y=function(){return(0,d.Qr)(B())}}},n={};function d(e){var t=n[e];if(void 0!==t)return t.exports;var a=n[e]={id:e,exports:{}};return l[e](a,a.exports,d),a.exports}d.m=l,d.amdO={},e=[],d.O=function(t,a,l,n){if(!a){var r=1/0;for(o=0;o<e.length;o++){a=e[o][0],l=e[o][1],n=e[o][2];for(var i=!0,s=0;s<a.length;s++)(!1&n||r>=n)&&Object.keys(d.O).every(function(e){return d.O[e](a[s])})?a.splice(s--,1):(i=!1,n<r&&(r=n));if(i){e.splice(o--,1);var c=l();void 0!==c&&(t=c)}}return t}n=n||0;for(var o=e.length;o>0&&e[o-1][2]>n;o--)e[o]=e[o-1];e[o]=[a,l,n]},d.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return d.d(t,{a:t}),t},a=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},d.t=function(e,l){if(1&l&&(e=this(e)),8&l)return e;if("object"==typeof e&&e){if(4&l&&e.__esModule)return e;if(16&l&&"function"==typeof e.then)return e}var n=Object.create(null);d.r(n);var r={};t=t||[null,a({}),a([]),a(a)];for(var i=2&l&&e;("object"==typeof i||"function"==typeof i)&&!~t.indexOf(i);i=a(i))Object.getOwnPropertyNames(i).forEach(function(t){r[t]=function(){return e[t]}});return r.default=function(){return e},d.d(n,r),n},d.d=function(e,t){for(var a in t)d.o(t,a)&&!d.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},d.e=function(){return Promise.resolve()},d.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),d.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},d.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},d.j=5428,function(){var e={5428:0};d.O.j=function(t){return 0===e[t]};var t=function(t,a){var l,n,r=a[0],i=a[1],s=a[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(l in i)d.o(i,l)&&(d.m[l]=i[l]);if(s)var o=s(d)}for(t&&t(a);c<r.length;c++)n=r[c],d.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return d.O(o)},a=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),d.nc=void 0;var r=d.O(void 0,[3540],function(){return d(7843)});r=d.O(r),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/datepickers/docs.mdx.js"]=r}();