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