UNPKG

@salesforce-ux/design-system

Version:
1 lines 15.4 kB
var SLDS;!function(){"use strict";var e,t={1594:function(e){e.exports=React},5343:function(e,t,a){a.r(t),a.d(t,{DATE_EXAMPLE:function(){return b},DATE_FORMAT_TEXT:function(){return f},DatePicker:function(){return w},DatePickerElement:function(){return S},SimpleTable:function(){return y},examples:function(){return v},states:function(){return R}});var l=a(1594),n=a.n(l),i=a(942),r=a.n(i),d=a(6955),s=a(188),c=a(2711),o=a(5526),u="date-input-id",m="height: 25rem;",b="12/31/2024",f="Format: ".concat(b),E=function(e){return n().createElement("div",{"aria-hidden":"false","aria-label":"Date picker: June",className:r()("slds-datepicker",e.className),role:"dialog"},e.children,n().createElement("button",{className:"slds-button slds-align_absolute-center slds-text-link"},"Today"))},g=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(d.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(d.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(s.Select,{id:"".concat(e.idPrefix,"_select")},n().createElement("option",null,"2021"),n().createElement("option",null,"2022"),n().createElement("option",null,"2023"))))},p=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")))},h=function(e){return n().createElement("tr",e,e.children)},k=function(e){return n().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"]},n().createElement("span",{className:"slds-day"},e.children))},y=function(e){return n().createElement("table",{className:"slds-table","aria-label":"Example table for datepicker"},n().createElement("tbody",null,n().createElement("tr",null,n().createElement("th",null,"Name"),n().createElement("th",null,"Date")),n().createElement("tr",null,n().createElement("td",null,"Order"),n().createElement("td",null,e.children))))},w=function(e){return n().createElement(E,{className:"slds-dropdown slds-dropdown_left"},n().createElement(g,{idPrefix:e.idPrefix}),n().createElement("table",{"aria-multiselectable":"true",className:"slds-datepicker__month",role:"grid"},n().createElement("thead",null,n().createElement(p,{idPrefix:e.idPrefix})),n().createElement("tbody",null,n().createElement(h,null,n().createElement(k,{"aria-selected":"false",isAdjacentMonth:!0,"aria-label":"31 May 2020"},"31"),n().createElement(k,{"aria-selected":"false",tabIndex:"0","aria-label":"1 June 2020"},"1"),n().createElement(k,{"aria-selected":"false","aria-label":"2 June 2020"},"2"),n().createElement(k,{"aria-selected":"false","aria-label":"3 June 2020"},"3"),n().createElement(k,{"aria-selected":"false","aria-label":"4 June 2020"},"4"),n().createElement(k,{"aria-selected":"false","aria-label":"5 June 2020"},"5"),n().createElement(k,{"aria-selected":"false","aria-label":"6 June 2020"},"6")),n().createElement(h,null,n().createElement(k,{"aria-selected":"false","aria-label":"7 June 2020"},"7"),n().createElement(k,{"aria-selected":"false","aria-label":"8 June 2020"},"8"),n().createElement(k,{"aria-selected":"false","aria-label":"9 June 2020"},"9"),n().createElement(k,{"aria-selected":"false","aria-label":"10 June 2020"},"10"),n().createElement(k,{"aria-selected":"false","aria-label":"11 June 2020"},"11"),n().createElement(k,{"aria-selected":"false","aria-label":"12 June 2020"},"12"),n().createElement(k,{"aria-selected":"false","aria-label":"13 June 2020"},"13")),n().createElement(h,null,n().createElement(k,{"aria-selected":"false","aria-label":"14 June 2020"},"14"),n().createElement(k,{"aria-selected":"false","aria-label":"15 June 2020"},"15"),n().createElement(k,{"aria-selected":"false","aria-label":"16 June 2020"},"16"),n().createElement(k,{"aria-selected":"false","aria-label":"17 June 2020"},"17"),n().createElement(k,{"aria-selected":"false","aria-current":e.todayActive?"date":null,className:e.todayActive?"slds-is-today":null,"aria-label":"18 June 2020"},"18"),n().createElement(k,{"aria-selected":"false","aria-label":"19 June 2020"},"19"),n().createElement(k,{"aria-selected":"false","aria-label":"20 June 2020"},"20")),n().createElement(h,{className:r()({"slds-has-multi-selection":"week-4"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},n().createElement(k,{"aria-selected":"false","aria-label":"21 June 2020"},"21"),n().createElement(k,{"aria-selected":"false","aria-label":"22 June 2020"},"22"),n().createElement(k,{"aria-selected":"false","aria-label":"23 June 2020"},"23"),n().createElement(k,{"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"),n().createElement(k,{"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"),n().createElement(k,{"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(k,{"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(h,{className:r()({"slds-has-multi-selection":"week-5"===e.dateRange,"slds-has-multi-row-selection":e.dateRangeMulti})},n().createElement(k,{"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"),n().createElement(k,{"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(k,{"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(k,{"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"),n().createElement(k,{"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"),n().createElement(k,{"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"),n().createElement(k,{"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")))))},S=function(e){return n().createElement(c.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(w,{idPrefix:e.idPrefix,todayActive:e.todayActive,todayActiveInRange:e.todayActiveInRange,dateSelected:e.dateSelected,dateRange:e.dateRange,dateRangeMulti:e.dateRangeMulti})},n().createElement(o.A,{id:e.dateInputId,placeholder:" ",defaultValue:e.defaultValue,required:e.isRequired,disabled:e.isDisabled}),n().createElement(d.A,{className:"slds-input__icon slds-input__icon_right",symbol:"event",assistiveText:"Select a date",title:"Select a date",disabled:e.isDisabled}))};t.default=[{id:"default",label:"Base – default",demoStyles:m,element:n().createElement(S,{idPrefix:"defaultPicker",labelContent:"Date",dateInputId:u+"-default",isOpen:!0,todayActive:!0,dateFormat:f})}];var R=[{id:"datepicker-day-selected",label:"Date selected",demoStyles:m,element:n().createElement(S,{idPrefix:"pickerDaySelected",labelContent:"Date",dateInputId:u+"-day_selected",isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021",dateFormat:f})},{id:"datepicker-with-error",label:"Date Picker has Error",demoStyles:m,element:n().createElement(S,{idPrefix:"pickerWithError",labelContent:"Date",dateInputId:u+"-error",isOpen:!0,todayActive:!0,hasError:!0})},{id:"datepicker-required",label:"Date Picker - required",demoStyles:m,element:n().createElement(S,{idPrefix:"pickerRequired",labelContent:"Date",dateInputId:u+"-required",isOpen:!0,todayActive:!0,isRequired:!0,dateFormat:f})},{id:"datepicker-required-with-error",label:"Date Picker - required with error",demoStyles:m,element:n().createElement(S,{idPrefix:"pickerRequired",labelContent:"Date",dateInputId:u+"-required",isOpen:!0,todayActive:!0,isRequired:!0,hasError:!0})},{id:"datepicker-with-tooltip",label:"Date Picker - With tooltip",demoStyles:m,element:n().createElement(S,{idPrefix:"pickerRequired",labelContent:"Date",dateInputId:u+"-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:f})},{id:"datepicker-disabled",label:"Datepicker - disabled",demoStyles:"height: 8rem;",storybookStyles:!0,element:n().createElement(S,{idPrefix:"pickerDisabled",labelContent:"Date",dateInputId:u+"-table",isDisabled:!0,dateFormat:f})},{id:"date-format-visible",label:"Date Picker - date format visible",demoStyles:"height: 6rem;",element:n().createElement(S,{idPrefix:"pickerDateFormatVisible",labelContent:"Date",dateInputId:u+"-date-format-visible",dateFormat:f,showDateFormat:!0})}],v=[{id:"datepicker-in-datatable",label:"Datepicker in a Data Table",demoStyles:m,element:n().createElement(y,null,n().createElement(S,{idPrefix:"pickerInTable",labelContent:"Date",dateInputId:u+"-table",isOpen:!0,todayActive:!0,dateFormat:f}))},{id:"datepicker-in-datatable_date-selected",label:"Datepicker with date selected in a Data Table",demoStyles:m,element:n().createElement(y,null,n().createElement(S,{idPrefix:"pickerInTable-selected",labelContent:"Date",dateInputId:u+"-table",isOpen:!0,todayActive:!0,dateSelected:"single",dateRange:"week-4",defaultValue:"06/24/2021",dateFormat:f}))},{id:"datepicker-in-datatable_with-error",label:"Datepicker with an error in a Data Table",demoStyles:m,element:n().createElement(y,null,n().createElement(S,{idPrefix:"pickerInTable-error",labelContent:"Date",dateInputId:u+"-table",isOpen:!0,todayActive:!0,hasError:!0}))}]}},a={};function l(e){var n=a[e];if(void 0!==n)return n.exports;var i=a[e]={exports:{}};return t[e](i,i.exports,l),i.exports}l.m=t,l.amdO={},e=[],l.O=function(t,a,n,i){if(!a){var r=1/0;for(o=0;o<e.length;o++){a=e[o][0],n=e[o][1],i=e[o][2];for(var d=!0,s=0;s<a.length;s++)(!1&i||r>=i)&&Object.keys(l.O).every(function(e){return l.O[e](a[s])})?a.splice(s--,1):(d=!1,i<r&&(r=i));if(d){e.splice(o--,1);var c=n();void 0!==c&&(t=c)}}return t}i=i||0;for(var o=e.length;o>0&&e[o-1][2]>i;o--)e[o]=e[o-1];e[o]=[a,n,i]},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=3511,function(){var e={518:0,1117:0,1252: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 n,i,r=a[0],d=a[1],s=a[2],c=0;if(r.some(function(t){return 0!==e[t]})){for(n in d)l.o(d,n)&&(l.m[n]=d[n]);if(s)var o=s(l)}for(t&&t(a);c<r.length;c++)i=r[c],l.o(e,i)&&e[i]&&e[i][0](),e[i]=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 n=l.O(void 0,[6790],function(){return l(5343)});n=l.O(n),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/showcase/./ui/components/datepickers/base/example.jsx.js"]=n}();