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

Salesforce Lightning Design System

var SLDS="object"==typeof SLDS?SLDS:{};SLDS["__internal/chunked/docs/./ui/components/datetime-picker/docs.mdx.js"]=function(e){function t(t){for(var r,i,l=t[0],s=t[1],d=t[2],m=0,u=[];m<l.length;m++)i=l[m],Object.prototype.hasOwnProperty.call(n,i)&&n[i]&&u.push(n[i][0]),n[i]=0;for(r in s)Object.prototype.hasOwnProperty.call(s,r)&&(e[r]=s[r]);for(c&&c(t);u.length;)u.shift()();return o.push.apply(o,d||[]),a()}function a(){for(var e,t=0;t<o.length;t++){for(var a=o[t],r=!0,l=1;l<a.length;l++){var s=a[l];0!==n[s]&&(r=!1)}r&&(o.splice(t--,1),e=i(i.s=a[0]))}return e}var r={},n={26:0},o=[];function i(t){if(r[t])return r[t].exports;var a=r[t]={i:t,l:!1,exports:{}};return e[t].call(a.exports,a,a.exports,i),a.l=!0,a.exports}i.m=e,i.c=r,i.d=function(e,t,a){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:a})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var a=Object.create(null);if(i.r(a),Object.defineProperty(a,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)i.d(a,r,function(t){return e[t]}.bind(null,r));return a},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/assets/scripts/bundle/";var l=this.webpackJsonpSLDS___internal_chunked_docs=this.webpackJsonpSLDS___internal_chunked_docs||[],s=l.push.bind(l);l.push=t,l=l.slice();for(var d=0;d<l.length;d++)t(l[d]);var c=s;return o.push([801,0]),a()}({0:function(e,t){e.exports=React},20:function(e,t){e.exports=ReactDOM},22:function(e,t){e.exports=JSBeautify},801:function(e,t,a){"use strict";a.r(t),a.d(t,"getElement",(function(){return M})),a.d(t,"getContents",(function(){return N}));var r=a(0),n=a.n(r),o=a(4),i=a(2),l=a(15),s=a(3),d=a.n(s),c=a(5),m=a.n(c),u=a(1),p=a(23),h=a(24),f=a(26),b=a(11),y=a(37),g=a(7),w=a(8),v=a(17);function O(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==a)return;var r,n,o=[],i=!0,l=!1;try{for(a=a.call(e);!(i=(r=a.next()).done)&&(o.push(r.value),!t||o.length!==t);i=!0);}catch(e){l=!0,n=e}finally{try{i||null==a.return||a.return()}finally{if(l)throw n}}return o}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return x(e,t);var a=Object.prototype.toString.call(e).slice(8,-1);"Object"===a&&e.constructor&&(a=e.constructor.name);if("Map"===a||"Set"===a)return Array.from(e);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return x(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function x(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,r=new Array(t);a<t;a++)r[a]=e[a];return r}var _=function(e){var t=e.dropdown,a=e.dropdownIsOpen,o=e.hasFocus,i=e.hasError,l=e.isOpen,s=e.isRequired,d=e.isDisabled,c=e.listboxData,f=e.dateDefaultValue,y=e.showRequiredIndicator,x=e.hasTooltip,_=e.showTooltip,S=e.fieldLevelDateMessage,E=e.fieldLevelTimeMessage,D=Object(r.useRef)(),k=O(Object(r.useState)(""),2),j=k[0],T=k[1],q=O(Object(r.useState)(""),2),I=q[0],R=q[1],A=O(Object(r.useState)(u.d.uniqueId("example-unique-id-")),1)[0],M=O(Object(r.useState)(u.d.uniqueId("example-unique-id-")),1)[0],N=O(Object(r.useState)(u.d.uniqueId("example-unique-id-")),1)[0];Object(r.useEffect)((function(){D.current&&("id"in D.current&&D.current.id&&T(D.current.id),"ariaChecked"in D.current&&D.current.ariaChecked&&R(D.current.textContent))}),[]);var L={"slds-is-open":a};return n.a.createElement("div",{className:"slds-form"},n.a.createElement("fieldset",{className:m()("slds-form-element slds-form-element_compound",{"slds-has-error":i,"slds-datetimepicker_has-tooltip":_})},n.a.createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},s&&n.a.createElement("abbr",{className:"slds-required",title:"required"},"*"," "),"Date and Time"),n.a.createElement("div",{className:"slds-form-element__control"},n.a.createElement("div",{className:"slds-form-element__group"},n.a.createElement("div",{className:"slds-form-element__row"},n.a.createElement(w.b,{formElementClassName:m()("slds-dropdown-trigger slds-dropdown-trigger_click",L),labelContent:"Date",inputId:A,hasRightIcon:!0,dropdown:t,hasError:i,isRequired:s,showRequiredIndicator:y,hasTooltip:!(!x||!S)&&x,showTooltip:!(!_||!S)&&_,fieldLevelMessage:S},n.a.createElement(v.a,{id:A,placeholder:"Select a date…",defaultValue:f,"aria-describedby":i&&A+"-error",required:s,disabled:d}),n.a.createElement(g.b,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:d})),n.a.createElement(p.b,{id:M,"aria-controls":N,"aria-activedescendant":j,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:i,isDisabled:d,hasTooltip:x&&E?x:null,showTooltip:_&&E?_:null,fieldLevelMessage:E,isOpen:l,rightInputIcon:n.a.createElement(b.a,{symbol:"clock",className:m()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":i,"slds-is-disabled":d}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:n.a.createElement(h.e,{className:"slds-dropdown_fluid slds-dropdown_left",id:N,snapshot:c,type:"plain",count:6,focusedRef:D}),resultsType:"listbox",hasInteractions:!0,hasFocus:o,value:I})))),i&&n.a.createElement("div",{className:"slds-form-element__help",id:A+"-error"},"Complete this field.")))};_.propTypes={dropdown:d.a.node,dropdownIsOpen:d.a.bool,hasFocus:d.a.bool,isOpen:d.a.bool,isRequired:d.a.bool,hasError:d.a.bool,listboxIsOpen:d.a.bool,listboxData:d.a.object.isRequired,dateDefaultValue:d.a.string,showRequiredIndicator:d.a.bool,isDisabled:d.a.bool},_.defaultProps={dropdown:n.a.createElement(y.a,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1};var S=n.a.createElement(_,{listboxData:f.x}),E=(f.x,[{id:"date-selection",label:"Date selected",element:n.a.createElement(_,{dropdown:n.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:f.x})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:n.a.createElement(_,{dropdown:n.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:f.z})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:n.a.createElement(_,{dropdownIsOpen:!1,isRequired:!0,listboxData:f.x})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:n.a.createElement(_,{dropdownIsOpen:!1,hasError:!0,listboxData:f.x})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:n.a.createElement(_,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:f.x})},{id:"datetimepicker-with-tooltip-for-datepicker",label:"Datetime Picker With Tooptip for datepicker",demoStyles:"height: 20rem;",element:n.a.createElement(_,{dropdownIsOpen:!0,listboxData:f.x,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy | ex: Jan 1 2023"})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:n.a.createElement(_,{dropdown:n.a.createElement(y.a,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00 am"}),dropdownIsOpen:!1,dateDefaultValue:"Jan 1 2023",isOpen:!0,hasFocus:!0,hasTooltip:!0,showTooltip:!0,listboxData:f.z,fieldLevelTimeMessage:"Format: hh:mm a | ex: 12:00 AM"})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:n.a.createElement(_,{dropdownIsOpen:!1,listboxData:f.x,isDisabled:!0})}]),D=o.c.a,k=o.c.code,j=o.c.h2,T=o.c.h3,q=o.c.li,I=o.c.p,R=o.c.strong,A=o.c.ul,M=function(){return Object(r.createElement)(o.b,{},Object(r.createElement)("div",{className:"doc lead"},"A datetime picker is used to select a day and a time."),Object(r.createElement)(i.a,{exampleOnly:!0,demoStyles:"height: 28rem;"},Object(u.f)(S)),j({id:"About-datetime-picker"},"About datetime picker"),T({id:"Implementation"},"Implementation"),I({},"The datetime is two ",D({href:"/components/form-element"},"form elements"),", each containing a label and text ",D({href:"/components/input"},"input"),", and a dropdown ",D({href:"/components/menus"},"menu"),", containing a grid-based calendar and filters. The date form element acts as a trigger for the dropdown."),Object(r.createElement)(l.a,{type:"warning"},Object(r.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.")),I({},"The datetime picker has the following markup requirements:"),I({},R({},"All")),A({},q({},"Follow all accessibility requirements mentioned in the ",D({href:"/components/datepickers"},"Datepicker")," and ",D({href:"/components/timepicker"},"Timepicker")," blueprints.")),I({},R({},"Desktop")),A({},q({},"Add ",k({},".slds-is-open")," to the element with ",k({},".slds-dropdown-trigger")," to invoke the dropdown that contains the datepicker and the list of time options."),q({},"On the timepicker, the ",k({},".slds-has-focus")," modifier class is required on the ",k({},".slds-listbox__option")," element that has focus."),q({},"On the timepicker, the ",k({},".slds-is-selected")," modifier class is required on the ",k({},".slds-listbox__option")," element that has been selected."),q({},"On the datepicker, the ",k({},".slds-is-selected")," modifier class is required on the ",k({},"td")," element that has the selected day."),q({},"On the datepicker, the ",k({},".slds-is-today")," modifier class is required on the ",k({},"td")," element that is the current day.")),I({},R({},"Mobile")),A({},q({},"When on mobile, we want to leverage the native datetime picker by changing the ",k({},"input")," type from ",k({},"text")," to ",k({},"datetime-local")),q({},"The ",k({},'input type="datetime-local"')," will create an input field allowing a date and time to be easily entered — this includes year, month, day, hours, and minutes."),q({},"When switching ",k({},'input type="text"')," to ",k({},'input type="datetime-local"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",A({},q({},"On the element with the class ",k({},"slds-combobox"),", please remove ",k({},'role="combobox"'),", ",k({},"aria-expanded"),", and ",k({},"aria-haspopup"),"."),q({},"On the ",k({},"input")," that we just added ",k({},'type="datetime-local"')," to, please remove ",k({},"aria-controls"),", ",k({},"aria-autocomplete"),", and ",k({},'role="textbox"'),".")))),j({id:"Base"},"Base"),Object(r.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(S)),j({id:"States"},"States"),I({},"Adding ",k({},"slds-datetimepicker_has-tooltip")," to the element with ",k({},"slds-form-element_compound")," aligns the legend properly when there is an info tooltip."),T({id:"Date-selection"},"Date selection"),Object(r.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(E,"date-selection")),T({id:"Time-selection"},"Time selection"),Object(r.createElement)(i.a,{demoStyles:"height: 28rem;"},Object(u.f)(E,"time-selection")))},N=function(){return Object(o.a)(M())}}});