@salesforce-ux/design-system/__internal/chunked/showcase/ui/components/datetime-picker/base/example.jsx.js

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t={1186:function(e,t,a){a.r(t),a.d(t,{examples:function(){return k},states:function(){return _}});var l=a(1594),s=a.n(l),n=a(7412),r=a.n(n),i=a(942),d=a.n(i),c=a(806),o=a(5159),m=a(6185),u=a(3964),f=a(538),b=a(5343),p=a(6955),E=a(2711),h=a(5526);function g(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){var l,s,n,r,i=[],d=!0,c=!1;try{if(n=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;d=!1}else for(;!(d=(l=n.call(a)).done)&&(i.push(l.value),i.length!==t);d=!0);}catch(e){c=!0,s=e}finally{try{if(!d&&null!=a.return&&(r=a.return(),Object(r)!==r))return}finally{if(c)throw s}}return i}}(e,t)||function(e,t){if(e){if("string"==typeof e)return w(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?w(e,t):void 0}}(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 w(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,l=Array(t);a<t;a++)l[a]=e[a];return l}var y=function(e){var t=e.dateFormat,a=e.dropdown,n=e.dropdownIsOpen,r=e.hasFocus,i=e.hasError,u=e.isOpen,b=e.isRequired,w=e.isDisabled,y=e.listboxData,k=e.dateDefaultValue,_=e.showRequiredIndicator,S=e.hasTooltip,T=e.showTooltip,v=e.fieldLevelDateMessage,R=e.fieldLevelTimeMessage,x=e.showDateFormat,D=(0,l.useRef)(),A=g((0,l.useState)(""),2),N=A[0],O=A[1],J=g((0,l.useState)(""),2),M=J[0],F=J[1],I=g((0,l.useState)(c.Ay.uniqueId("example-unique-id-")),1)[0],P=g((0,l.useState)(c.Ay.uniqueId("example-unique-id-")),1)[0],q=g((0,l.useState)(c.Ay.uniqueId("example-unique-id-")),1)[0];(0,l.useEffect)(function(){D.current&&("id"in D.current&&D.current.id&&O(D.current.id),"ariaChecked"in D.current&&D.current.ariaChecked&&F(D.current.textContent))},[]);var j={"slds-is-open":n};return s().createElement("div",{className:"slds-form"},s().createElement("fieldset",{className:d()("slds-form-element slds-form-element_compound",{"slds-has-error":i,"slds-datetimepicker_has-tooltip":T})},s().createElement("legend",{className:"slds-form-element__label slds-form-element__legend"},b&&s().createElement("abbr",{className:"slds-required",title:"required","aria-hidden":"true"},"*"," "),"Date and Time"),s().createElement("div",{className:"slds-form-element__control"},s().createElement("div",{className:"slds-form-element__group"},s().createElement("div",{className:"slds-form-element__row"},s().createElement(E.ZS,{formElementClassName:d()("slds-dropdown-trigger slds-dropdown-trigger_click",j),labelContent:"Date",inputId:I,hasRightIcon:!0,dropdown:a,hasError:i,isRequired:b,showRequiredIndicator:_,hasTooltip:!(!S||!v)&&S,showTooltip:!(!T||!v)&&T,fieldLevelMessage:v,inlineMessage:!i&&t,hasHiddenInlineMessage:!x},s().createElement(h.A,{id:I,placeholder:"Select a date…",defaultValue:k,"aria-describedby":i&&I+"-error",required:b,disabled:w}),s().createElement(p.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:w})),s().createElement(o.Ay,{id:P,"aria-controls":q,"aria-activedescendant":N,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",hasError:i,isDisabled:w,hasTooltip:S&&R?S:null,showTooltip:T&&R?T:null,fieldLevelMessage:R,isOpen:u,rightInputIcon:s().createElement(f.UtilityIcon,{symbol:"clock",className:d()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":i,"slds-is-disabled":w}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:s().createElement(m.Ay,{className:"slds-dropdown_fluid slds-dropdown_left",id:q,snapshot:y,type:"plain",count:6,focusedRef:D}),resultsType:"listbox",hasInteractions:!0,hasFocus:r,value:M})))),i&&s().createElement("div",{className:"slds-form-element__help",id:I+"-error"},"Complete this field.")))};y.propTypes={dropdown:r().node,dropdownIsOpen:r().bool,hasFocus:r().bool,isOpen:r().bool,isRequired:r().bool,hasError:r().bool,listboxIsOpen:r().bool,listboxData:r().object.isRequired,dateDefaultValue:r().string,showRequiredIndicator:r().bool,isDisabled:r().bool,format:r().string},y.defaultProps={dropdown:s().createElement(b.DatePicker,{todayActive:!0}),dropdownIsOpen:!0,showRequiredIndicator:!1,isDisabled:!1},t.default=s().createElement(y,{dateFormat:b.DATE_FORMAT_TEXT,listboxData:u.eE});var k=[{id:"small-width-container",label:"Small Width Container",demoStyles:"height: auto; width: 200px; border: 1px dashed #ddd;",storybookStyles:!0,element:s().createElement(y,{dropdownIsOpen:!1,listboxData:u.eE,dateFormat:b.DATE_FORMAT_TEXT})}],_=[{id:"date-example-text-visible",label:"Date and Time - date example text visible",demoStyles:"height: 6rem;",element:s().createElement(y,{dropdown:null,listboxData:u.eE,dateFormat:b.DATE_FORMAT_TEXT,showDateFormat:!0})},{id:"date-selection",label:"Date selected",element:s().createElement(y,{dropdown:s().createElement(b.DatePicker,{todayActive:!0,dateSelected:"single",dateRange:"week-4"}),dateDefaultValue:"06/24/2021",listboxData:u.eE,dateFormat:b.DATE_FORMAT_TEXT})},{id:"time-selection",label:"Time selected",demoStyles:"height: 20rem;",storybookStyles:!0,element:s().createElement(y,{dropdown:s().createElement(b.DatePicker,{todayActive:!0,dateSelected:"single",dateRange:"week-4",value:"8:00am"}),dropdownIsOpen:!1,dateDefaultValue:"06/24/2021",isOpen:!0,hasFocus:!0,listboxData:u.F_,dateFormat:b.DATE_FORMAT_TEXT})},{id:"required",label:"Date and Time - required",demoStyles:"height: 20rem;",element:s().createElement(y,{dropdownIsOpen:!1,isRequired:!0,listboxData:u.eE,dateFormat:b.DATE_FORMAT_TEXT})},{id:"error",label:"Date and Time - error",demoStyles:"height: 20rem;",element:s().createElement(y,{dropdownIsOpen:!1,hasError:!0,listboxData:u.eE})},{id:"required-error",label:"Date and Time - required and has error",demoStyles:"height: 20rem;",element:s().createElement(y,{dropdownIsOpen:!1,isRequired:!0,hasError:!0,listboxData:u.eE})},{id:"datetimepicker-with-tooltip-for-datepicker",label:"Datetime Picker With Tooptip for datepicker",demoStyles:"height: 20rem;",element:s().createElement(y,{dropdownIsOpen:!0,listboxData:u.eE,isRequired:!0,dateDefaultValue:"Jan 1 2023",hasTooltip:!0,showTooltip:!0,fieldLevelDateMessage:"Format: mmm d yyyy | ex: Jan 1 2023",dateFormat:b.DATE_FORMAT_TEXT})},{id:"datetimepicker-with-tooltip-for-timepicker",label:"Datetime Picker With Tooptip for timepicker",demoStyles:"height: 20rem;",element:s().createElement(y,{dropdown:s().createElement(b.DatePicker,{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:u.F_,fieldLevelTimeMessage:"Format: hh:mm a | ex: 12:00 AM",dateFormat:b.DATE_FORMAT_TEXT})},{id:"disabled",label:"Date and Time - disabled",demoStyles:"height: 10rem;",storybookStyles:!0,element:s().createElement(y,{dropdownIsOpen:!1,listboxData:u.eE,isDisabled:!0,dateFormat:b.DATE_FORMAT_TEXT})},{id:"mobile",label:"Mobile",element:s().createElement(E.ZS,{labelContent:"Date",inputId:"date-input-id-mobile"},s().createElement(h.A,{id:"date-input-id-mobile",type:"datetime-local"}))}]},1594:function(e){e.exports=React},5343:function(e,t,a){a.d(t,{DATE_FORMAT_TEXT:function(){return c},DatePicker:function(){return p}});var l=a(1594),s=a.n(l),n=a(942),r=a.n(n),i=a(6955),d=a(188),c=(a(2711),a(5526),"Format: ".concat("12/31/2024")),o=function(e){return s().createElement("div",{"aria-hidden":"false","aria-label":"Date picker: June",className:r()("slds-datepicker",e.className),role:"dialog"},e.children,s().createElement("button",{className:"slds-button slds-align_absolute-center slds-text-link"},"Today"))},m=function(e){return s().createElement("div",{className:"slds-datepicker__filter slds-grid"},s().createElement("div",{className:"slds-datepicker__filter_month slds-grid slds-grid_align-spread slds-grow"},s().createElement("div",{className:"slds-align-middle"},s().createElement(i.A,{assistiveText:"Previous Month",className:"slds-button_icon-container",symbol:"left",title:"Previous Month"})),s().createElement("h2",{"aria-atomic":"false","aria-live":"polite",className:"slds-align-middle",id:"".concat(e.idPrefix,"-month")},"June"),s().createElement("div",{className:"slds-align-middle"},s().createElement(i.A,{assistiveText:"Next Month",className:"slds-button_icon-container",symbol:"right",title:"Next Month"}))),s().createElement("div",{className:"slds-shrink-none"},s().createElement("label",{className:"slds-assistive-text",htmlFor:"".concat(e.idPrefix,"_select")},"Pick a Year"),s().createElement(d.Select,{id:"".concat(e.idPrefix,"_select")},s().createElement("option",null,"2021"),s().createElement("option",null,"2022"),s().createElement("option",null,"2023"))))},u=function(e){return s().createElement("tr",{id:"".concat(e.idPrefix,"-weekdays")},s().createElement("th",{id:"".concat(e.idPrefix,"-Sunday"),scope:"col"},s().createElement("abbr",{title:"Sunday"},"Sun")),s().createElement("th",{id:"".concat(e.idPrefix,"-Monday"),scope:"col"},s().createElement("abbr",{title:"Monday"},"Mon")),s().createElement("th",{id:"".concat(e.idPrefix,"-Tuesday"),scope:"col"},s().createElement("abbr",{title:"Tuesday"},"Tue")),s().createElement("th",{id:"".concat(e.idPrefix,"-Wednesday"),scope:"col"},s().createElement("abbr",{title:"Wednesday"},"Wed")),s().createElement("th",{id:"".concat(e.idPrefix,"-Thursday"),scope:"col"},s().createElement("abbr",{title:"Thursday"},"Thu")),s().createElement("th",{id:"".concat(e.idPrefix,"-Friday"),scope:"col"},s().createElement("abbr",{title:"Friday"},"Fri")),s().createElement("th",{id:"".concat(e.idPrefix,"-Saturday"),scope:"col"},s().createElement("abbr",{title:"Saturday"},"Sat")))},f=function(e){return s().createElement("tr",e,e.children)},b=function(e){return s().createElement("td",{"aria-disabled":e["aria-disabled"],"aria-selected":e["aria-selected"],"aria-current":e["aria-current"],className:r()(e.className,{"slds-day_adjacent-month":e.isAdjacentMonth}),role:"gridcell",tabIndex:e.tabIndex,"aria-label":e["aria-label"]},s().createElement("span",{className:"slds-day"},e.children))},p=function(e){return s().createElement(o,{className:"slds-dropdown slds-dropdown_left"},s().createElement(m,{idPrefix:e.idPrefix}),s().createElement("table",{"aria-multiselectable":"true",className:"slds-datepicker__month",role:"grid"},s().createElement("thead",null,s().createElement(u,{idPrefix:e.idPrefix})),s().createElement("tbody",null,s().createElement(f,null,s().createElement(b,{"aria-selected":"false",isAdjacentMonth:!0,"aria-label":"31 May 2020"},"31"),s().createElement(b,{"aria-selected":"false",tabIndex:"0","aria-label":"1 June 2020"},"1"),s().createElement(b,{"aria-selected":"false","aria-label":"2 June 2020"},"2"),s().createElement(b,{"aria-selected":"false","aria-label":"3 June 2020"},"3"),s().createElement(b,{"aria-selected":"false","aria-label":"4 June 2020"},"4"),s().createElement(b,{"aria-selected":"false","aria-label":"5 June 2020"},"5"),s().createElement(b,{"aria-selected":"false","aria-label":"6 June 2020"},"6")),s().createElement(f,null,s().createElement(b,{"aria-selected":"false","aria-label":"7 June 2020"},"7"),s().createElement(b,{"aria-selected":"false","aria-label":"8 June 2020"},"8"),s().createElement(b,{"aria-selected":"false","aria-label":"9 June 2020"},"9"),s().createElement(b,{"aria-selected":"false","aria-label":"10 June 2020"},"10"),s().createElement(b,{"aria-selected":"false","aria-label":"11 June 2020"},"11"),s().createElement(b,{"aria-selected":"false","aria-label":"12 June 2020"},"12"),s().createElement(b,{"aria-selected":"false","aria-label":"13 June 2020"},"13")),s().createElement(f,null,s().createElement(b,{"aria-selected":"false","aria-label":"14 June 2020"},"14"),s().createElement(b,{"aria-selected":"false","aria-label":"15 June 2020"},"15"),s().createElement(b,{"aria-selected":"false","aria-label":"16 June 2020"},"16"),s().createElement(b,{"aria-selected":"false","aria-label":"17 June 2020"},"17"),s().createElement(b,{"aria-selected":"false","aria-current":e.todayActive?"date":null,className:e.todayActive?"slds-is-today":null,"aria-label":"18 June 2020"},"18"),s().createElement(b,{"aria-selected":"false","aria-label":"19 June 2020"},"19"),s().createElement(b,{"aria-selected":"false","aria-label":"20 June 2020"},"20")),s().createElement(f,{className:r()({"slds-has-multi-selection":"week-4"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},s().createElement(b,{"aria-selected":"false","aria-label":"21 June 2020"},"21"),s().createElement(b,{"aria-selected":"false","aria-label":"22 June 2020"},"22"),s().createElement(b,{"aria-selected":"false","aria-label":"23 June 2020"},"23"),s().createElement(b,{"aria-selected":!e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:r()({"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"),s().createElement(b,{"aria-selected":"single"===e.dateSelected||"week-4"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:r()({"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"),s().createElement(b,{"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"),s().createElement(b,{"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")),s().createElement(f,{className:r()({"slds-has-multi-selection":"week-5"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},s().createElement(b,{"aria-selected":!e.dateSelected||"week-5"!==e.dateRange&&"week-4-5"!==e.dateRange?"false":"true",className:r()({"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"),s().createElement(b,{"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"),s().createElement(b,{"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"),s().createElement(b,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:r()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"1 July 2020"},"1"),s().createElement(b,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:r()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"2 July 2020"},"2"),s().createElement(b,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:r()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"3 July 2020"},"3"),s().createElement(b,{"aria-selected":"single"!==e.dateSelected&&"week-5"===e.dateRange?"true":"false",className:r()("single"!==e.dateSelected&&"week-5"===e.dateRange?"slds-is-selected slds-is-selected-multi":null),isAdjacentMonth:!0,"aria-label":"4 July 2020"},"4")))))}}},a={};function l(e){var s=a[e];if(void 0!==s)return s.exports;var n=a[e]={exports:{}};return t[e](n,n.exports,l),n.exports}l.m=t,l.amdO={},e=[],l.O=function(t,a,s,n){if(!a){var r=1/0;for(o=0;o<e.length;o++){a=e[o][0],s=e[o][1],n=e[o][2];for(var i=!0,d=0;d<a.length;d++)(!1&n||r>=n)&&Object.keys(l.O).every(function(e){return l.O[e](a[d])})?a.splice(d--,1):(i=!1,n<r&&(r=n));if(i){e.splice(o--,1);var c=s();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,s,n]},l.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(t,{a:t}),t},l.d=function(e,t){for(var a in t)l.o(t,a)&&!l.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},l.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),l.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.j=1348,function(){var e={518:0,1117:0,1252:0,1348:0,1578:0,1974:0,2033:0,2274:0,2782:0,3140:0,3511:0,4268:0,4583:0,4723:0,4924:0,6671:0,7217:0,7257:0,7385:0,7508:0,8167:0,8458:0};l.O.j=function(t){return 0===e[t]};var t=function(t,a){var s,n,r=a[0],i=a[1],d=a[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(s in i)l.o(i,s)&&(l.m[s]=i[s]);if(d)var o=d(l)}for(t&&t(a);c<r.length;c++)n=r[c],l.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return l.O(o)},a=self.webpackJsonpSLDS___internal_chunked_showcase=self.webpackJsonpSLDS___internal_chunked_showcase||[];a.forEach(t.bind(null,0)),a.push=t.bind(null,a.push.bind(a))}(),l.nc=void 0;var s=l.O(void 0,[6790],function(){return l(1186)});s=l.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/datetime-picker/base/example.jsx.js"]=s}();