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

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/datepickers/docs.mdx.js"]=function(e){function t(t){for(var n,l,c=t[0],i=t[1],o=t[2],u=0,p=[];u<c.length;u++)l=c[u],Object.prototype.hasOwnProperty.call(d,l)&&d[l]&&p.push(d[l][0]),d[l]=0;for(n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n]);for(s&&s(t);p.length;)p.shift()();return r.push.apply(r,o||[]),a()}function a(){for(var e,t=0;t<r.length;t++){for(var a=r[t],n=!0,c=1;c<a.length;c++){var i=a[c];0!==d[i]&&(n=!1)}n&&(r.splice(t--,1),e=l(l.s=a[0]))}return e}var n={},d={25:0},r=[];function l(t){if(n[t])return n[t].exports;var a=n[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,l),a.l=!0,a.exports}l.m=e,l.c=n,l.d=function(e,t,a){l.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,t){if(1&t&&(e=l(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(l.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)l.d(a,n,function(t){return e[t]}.bind(null,n));return a},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,"a",t),t},l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.p="/assets/scripts/bundle/";var c=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],i=c.push.bind(c);c.push=t,c=c.slice();for(var o=0;o<c.length;o++)t(c[o]);var s=i;return r.push([787,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},787:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return O})),a.d(t,"getContents",(function(){return j}));var n=a(0),d=a.n(n),r=a(4),l=a(2),c=(a(28),a(45),a(14)),i=a(1),o=a(29),s="height: 25rem;",u=function(e){return d.a.createElement("div",{className:"slds-form slds-form_compound"},d.a.createElement("fieldset",{className:"slds-form-element"},d.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},"Start and End Date"),d.a.createElement("div",{className:"slds-form-element__control"},d.a.createElement("div",{className:"slds-form-element__group"},d.a.createElement("div",{className:"slds-form-element__row"},e.children)))))},p=[{id:"default",label:"Base - Default",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.c,{idPrefix:"rangeDefault_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-default"),isOpen:!0,todayActive:!0,dateFormat:o.a}),d.a.createElement(o.c,{idPrefix:"rangeDefault_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-default"),dateFormat:o.a}))}],m=[{id:"start-date",label:"Start date selected",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.c,{idPrefix:"rangeSelected_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-start_selected"),isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021",dateFormat:o.a}),d.a.createElement(o.c,{idPrefix:"rangeSelected_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-start_selected"),dateFormat:o.a}))},{id:"end-date-week",label:"End date selected (Same week)",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.c,{idPrefix:"rangeWeekSame_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-end_selected"),defaultValue:"06/24/2021",dateFormat:o.a}),d.a.createElement(o.c,{idPrefix:"rangeWeekSame_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-end_selected"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4",defaultValue:"06/27/2020",dateFormat:o.a}))},{id:"end-date-weeks",label:"End date selected (Different week)",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.c,{idPrefix:"rangeWeekDiff_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-end_selected_diff_week"),defaultValue:"06/24/2021",dateFormat:o.a}),d.a.createElement(o.c,{idPrefix:"rangeWeekDiff_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-end_selected_diff_week"),isOpen:!0,todayActive:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020",dateFormat:o.a}))},{id:"today-in-range",label:"Today - In selected range",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.c,{idPrefix:"rangeToday_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-today_in_range"),defaultValue:"06/24/2021",dateFormat:o.a}),d.a.createElement(o.c,{idPrefix:"rangeToday_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-today_in_range"),isOpen:!0,todayActiveInRange:!0,dateSelected:!0,dateRange:"week-4-5",dateRangeMulti:!0,defaultValue:"06/30/2020",dateFormat:o.a}))},{id:"span-across-month-in-range",label:"Current and adjacent month in selected range",demoStyles:s,element:d.a.createElement(u,null,d.a.createElement(o.c,{idPrefix:"rangeSpanMonth_start",labelContent:"Start Date",dateInputId:"".concat("date-input-id-01","-adjacent_month"),defaultValue:"06/28/2020",dateFormat:o.a}),d.a.createElement(o.c,{idPrefix:"rangeSpanMonth_end",labelContent:"End Date",dateInputId:"".concat("date-input-id-02","-adjacent_month"),isOpen:!0,dateSelected:!0,dateRange:"week-5",defaultValue:"07/04/2020",dateFormat:o.a}))}],f=(o.d,o.c,"".concat("date-input-id-01","-default"),o.a,o.c,"".concat("date-input-id-02","-default"),o.a,o.d,o.c,"".concat("date-input-id-01","-table-start_selected"),o.a,o.c,"".concat("date-input-id-02","-table-start_selected"),o.a,o.d,o.c,"".concat("date-input-id-01","-table-end_selected"),o.a,o.c,"".concat("date-input-id-02","-table-end_selected"),o.a,o.d,o.c,"".concat("date-input-id-01","-table-end_selected_diff_week"),o.a,o.c,"".concat("date-input-id-02","-table-end_selected_diff_week"),o.a,o.d,o.c,"".concat("date-input-id-01","-table-today_in_range"),o.a,o.c,"".concat("date-input-id-02","-table-today_in_range"),o.a,o.d,o.c,"".concat("date-input-id-01","-table-adjacent_month"),o.a,o.c,"".concat("date-input-id-02","-table-adjacent_month"),o.a,r.c.a),h=r.c.code,b=r.c.h2,g=r.c.h3,y=r.c.h4,k=r.c.li,S=r.c.p,_=r.c.strong,w=r.c.ul,O=function(){return Object(n.createElement)(r.b,{},Object(n.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."),Object(n.createElement)(l.a,{exampleOnly:!0,demoStyles:Object(i.e)(o.e)},Object(i.f)(o.e)),b({id:"About-Datepickers"},"About Datepickers"),g({id:"Implementation"},"Implementation"),S({},"The datepicker is a ",f({href:"/components/form-element"},"form element"),", containing a label and text ",f({href:"/components/input"},"input"),", and a dropdown ",f({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The form element acts as a trigger for the dropdown."),Object(n.createElement)(c.a,{type:"warning"},Object(n.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.")),S({},"The datepicker has the following markup requirements:"),S({},_({},"Desktop:")),w({},k({},"Add ",h({},".slds-is-open")," to the element with ",h({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker."),k({},"The ",h({},".slds-is-selected")," modifier class is required on the ",h({},"td")," element that has the selected day."),k({},"The ",h({},".slds-is-today")," modifier class is required on the ",h({},"td")," element that is the current day."),k({},"The ",h({},".slds-has-multi-selection")," modifier class is required on the ",h({},"tr")," element that contains multiple days selected in the ",_({},"same")," week."),k({},"The ",h({},".slds-has-multi-row-selection")," modifier class is required on any ",h({},"tr")," element that contains multiple days selected in the ",_({},"multiple")," weeks."),k({},"The ",h({},".slds-is-selected-multi")," modifier class is required on the ",h({},"td")," element that contains a selected day within a range.")),S({},_({},"Mobile:")),w({},k({},"When on mobile, we want to leverage the native date picker by changing the ",h({},"input")," type from ",h({},"text")," to ",h({},"date")),k({},"The ",h({},'input type="date"')," will create an input field allowing a date and time to be easily entered — this includes year, month, day."),k({},"When switching ",h({},'input type="text"')," to ",h({},'input type="date"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",w({},k({},"On the element with the class ",h({},"slds-combobox"),", please remove ",h({},'role="combobox"'),", ",h({},"aria-expanded"),", and ",h({},"aria-haspopup"),"."),k({},"On the ",h({},"input")," that we just added ",h({},'type="date"')," to, please remove ",h({},"aria-controls"),", ",h({},"aria-autocomplete"),", and ",h({},'role="textbox"'),".")))),g({id:"Accessibility"},"Accessibility"),y({id:"Markup"},"Markup"),S({},_({},"Dialog:")),w({},k({},"Should act as a focus trap so the user only cycles through the datepicker ",h({},"dialog")," when the datepicker is open")),S({},_({},"Grid:")),w({},k({},"Table must be labelled with ",h({},'role="grid"')," and be appropriately labelled with ",h({},"aria-labelledby")),k({},"Use ",h({},'aria-multiselectable="true"')," to allow for selection of multiple days"),k({},"Should act as a single focus stop")),S({},_({},"Gridcell:")),w({},k({},"All dates should have ",h({},'role="gridcell"')," and ",h({},'aria-selected="false"')," on the ",h({},"gridcell")," by default"),k({},"If a date is selected, ",h({},"aria-selected")," should be set to ",h({},"true")," on the corresponding ",h({},"gridcell")),k({},h({},"aria-current")," is used to indicate which day is today and should be set to ",h({},'aria-current="date"')),k({},h({},"aria-label")," is used to provide the full ",h({},"DD MM YYYY")," text of the date")),S({},_({},"Opening the Datepicker:")),w({},k({},"Mouse user: open the datepicker when a mouse user clicks on the input"),k({},"Keyboard user: only open the datepicker when a keyboard user presses ",h({},"enter")," or ",h({},"space")," on the datepicker button",w({},k({},"Do not open the datepicker when user focus is on the input")))),S({},_({},"Closing the Datepicker:")),w({},k({},"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({},k({},"The focus should not go on the calendar icon button that triggered the calendar to open.")))),y({id:"Keyboard-Interactions"},"Keyboard Interactions"),w({},k({},"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"),k({},h({},"left")," and ",h({},"right")," arrow keys to navigate row"),k({},h({},"up")," and ",h({},"down")," arrow keys to navigate between weeks on the same day"),k({},h({},"home")," and ",h({},"end")," keys to jump to beginning or end of current row"),k({},h({},"pagedown")," and ",h({},"pageup")," to navigate between months"),k({},h({},"alt + pagedown")," and ",h({},"alt + pageup")," to navigate between years"),k({},h({},"enter")," to select date and close datepicker"),k({},h({},"esc")," to close datepicker without choosing a date")),b({id:"Base"},"Base"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(o.e)},Object(i.f)(o.e)),g({id:"States"},"States"),y({id:"Date-Selected"},"Date Selected"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(o.f,"datepicker-day-selected")},Object(i.f)(o.f,"datepicker-day-selected")),y({id:"Date-Picker-Has-Error"},"Date Picker Has Error"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(o.f,"datepicker-with-error")},Object(i.f)(o.f,"datepicker-with-error")),y({id:"Date-Required"},"Date Required"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(o.f,"datepicker-required")},Object(i.f)(o.f,"datepicker-required")),y({id:"Date-Required-Date-Picker-Has-Error"},"Date Required, Date Picker Has Error"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(o.f,"datepicker-required-with-error")},Object(i.f)(o.f,"datepicker-required-with-error")),g({id:"Date-Format-Visible"},"Date Format Visible"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(o.f,"date-format-visible")},Object(i.f)(o.f,"date-format-visible")),b({id:"Range"},"Range"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(p)},Object(i.f)(p)),g({id:"States-2"},"States"),y({id:"Start-Date-Selected"},"Start Date Selected"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(m,"start-date")},Object(i.f)(m,"start-date")),y({id:"End-date-selected-(Same-week)"},"End date selected (Same week)"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(m,"end-date-week")},Object(i.f)(m,"end-date-week")),y({id:"End-date-selected-(Different-week)"},"End date selected (Different week)"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(p)},Object(i.f)(p)),y({id:"Today-In-selected-range"},"Today - In selected range"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(p)},Object(i.f)(p)),y({id:"Current-And-Adjacent-Month-In-Selected-Range"},"Current And Adjacent Month In Selected Range"),Object(n.createElement)(l.a,{demoStyles:Object(i.e)(p)},Object(i.f)(p)))},j=function(){return Object(r.a)(O())}}});