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

Salesforce Lightning Design System

var SLDS;!function(){"use strict";var e,t,n,r={1594:function(e){e.exports=React},1981:function(e){e.exports=JSBeautify},5206:function(e){e.exports=ReactDOM},6186:function(e,t,n){n.r(t),n.d(t,{getContents:function(){return T},getElement:function(){return k}});var r=n(1594),o=n.n(r),i=n(5671),s=n(6547),l=(n(5619),n(7412)),a=n.n(l),u=n(942),c=n.n(u),d=n(5159),m=n(6185),f=n(3964),p=n(538),h=n(806);function b(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,i,s,l=[],a=!0,u=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;a=!1}else for(;!(a=(r=i.call(n)).done)&&(l.push(r.value),l.length!==t);a=!0);}catch(e){u=!0,o=e}finally{try{if(!a&&null!=n.return&&(s=n.return(),Object(s)!==s))return}finally{if(u)throw o}}return l}}(e,t)||function(e,t){if(e){if("string"==typeof e)return y(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?y(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 y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}var v=function(e){var t=e.hasFocus,n=e.isOpen,i=e.listboxData,s=e.hasError,l=e.isRequired,a=e.isDisabled,u=e.isReadOnlyInput,f=(0,r.useRef)(),y=b((0,r.useState)(""),2),v=y[0],O=y[1],g=b((0,r.useState)(""),2),x=g[0],E=g[1],S=b((0,r.useState)(h.Ay.uniqueId("example-unique-id-")),1)[0],_=b((0,r.useState)(h.Ay.uniqueId("example-unique-id-")),1)[0];return(0,r.useEffect)(function(){f.current&&("id"in f.current&&f.current.id&&O(f.current.id),"ariaChecked"in f.current&&f.current.ariaChecked&&E(f.current.textContent))},[]),o().createElement(o().Fragment,null,o().createElement(d.Ay,{className:c()("slds-timepicker",{"slds-has-error":s}),id:S,"aria-controls":_,"aria-activedescendant":v,autocomplete:!0,label:"Time",placeholder:"Select a time…",inputIconPosition:"right",rightInputIcon:o().createElement(p.eX,{symbol:"clock",className:c()("slds-icon slds-icon_x-small slds-icon-text-default",{"slds-icon-text-error":s,"slds-is-disabled":a}),containerClassName:"slds-input__icon slds-input__icon_right",assistiveText:!1,title:!1}),results:o().createElement(m.Ay,{id:_,snapshot:i,type:"plain",count:6,focusedRef:f}),resultsType:"listbox",hasInteractions:!u,hasFocus:t,isOpen:n,hasError:s,isRequired:l,isDisabled:a,isReadOnlyInput:u,value:x}),s&&o().createElement("div",{className:"slds-form-element__help",id:S+"-error"},"Complete this field."))};v.propTypes={hasFocus:a().bool,isOpen:a().bool,hasError:a().bool,isRequired:a().bool,isDisabled:a().bool,isReadOnlyInput:a().bool,listboxData:a().object};var O=o().createElement(v,{listboxData:f.eE}),g=[{id:"focused",label:"Focused",element:o().createElement(v,{listboxData:f.eE,hasFocus:!0,isOpen:!0})},{id:"open-item-focused",label:"Open - Item Focused",element:o().createElement(v,{listboxData:f.T5,hasFocus:!0,isOpen:!0})},{id:"time-selection",label:"Open - Time selected",element:o().createElement(v,{listboxData:f.F_,hasFocus:!0,isOpen:!0})},{id:"required",label:"Required",element:o().createElement(v,{listboxData:f.eE,isRequired:!0})},{id:"error",label:"Error",element:o().createElement(v,{listboxData:f.eE,hasError:!0})},{id:"required-error",label:"Required with Error",element:o().createElement(v,{listboxData:f.eE,isRequired:!0,hasError:!0})},{id:"disabled",label:"Disabled",demoStyles:"min-height: 8rem;",storybookStyles:!0,element:o().createElement(v,{listboxData:f.eE,isDisabled:!0})},{id:"readonly",label:"Readonly",demoStyles:"min-height: 8rem;",storybookStyles:!0,element:o().createElement(v,{listboxData:f.eE,isReadOnlyInput:!0})}],x=i.XB.a,E=i.XB.code,S=i.XB.h2,_=i.XB.h3,A=i.XB.li,w=i.XB.p,D=i.XB.strong,j=i.XB.ul,k=function(){return(0,r.createElement)(i.Ay,{},(0,r.createElement)("div",{className:"doc lead"},"A timepicker is an autocomplete text input to capture a time."),(0,r.createElement)(s.A,{exampleOnly:!0,demoStyles:"height: 16rem;"},(0,h.NO)(g,"time-selection")),S({id:"About-Timepicker"},"About Timepicker"),_({id:"Implementation"},"Implementation"),w({},"A timepicker is used to select a single time. The component is using the combobox HTML structure and has the following markup requirements:"),w({},D({},"Desktop:")),j({},A({},"Add ",E({},".slds-is-open")," to the element with ",E({},".slds-dropdown-trigger")," to invoke the dropdown that contains the list of time options."),A({},"The ",E({},".slds-has-focus")," modifier class is required on the ",E({},".slds-listbox__option")," element that has focus."),A({},"The ",E({},".slds-is-selected")," modifier class is required on the ",E({},".slds-listbox__option")," element that has been selected.")),w({},D({},"Mobile:")),j({},A({},"When on mobile, we want to leverage the native timepicker by changing the ",E({},"input")," type from ",E({},"text")," to ",E({},"time")),A({},"When switching ",E({},'input type="text"')," to ",E({},'input type="time"')," for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.",j({},A({},"On the element with the class ",E({},"slds-combobox"),", please remove ",E({},'role="combobox"'),", ",E({},"aria-expanded"),", and ",E({},"aria-haspopup"),"."),A({},"On the ",E({},"input")," that we just added ",E({},'type="time"')," too, please remove ",E({},"aria-controls"),", ",E({},"aria-autocomplete"),", and ",E({},'role="textbox"'),".")))),_({id:"Accessibility"},"Accessibility"),w({},"Please follow the implementation guidelines found under ",x({href:"/components/combobox"},"Combobox")),S({id:"Base"},"Base"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(O)),S({id:"States"},"States"),_({id:"Focused"},"Focused"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"focused")),_({id:"Open-Item-Focused"},"Open - Item Focused"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"open-item-focused")),_({id:"Open-Time-selected"},"Open - Time selected"),(0,r.createElement)(s.A,{demoStyles:"height: 16rem;"},(0,h.NO)(g,"time-selection")))},T=function(){return(0,i.Qr)(k())}}},o={};function i(e){var t=o[e];if(void 0!==t)return t.exports;var n=o[e]={id:e,exports:{}};return r[e](n,n.exports,i),n.exports}i.m=r,i.amdO={},e=[],i.O=function(t,n,r,o){if(!n){var s=1/0;for(c=0;c<e.length;c++){n=e[c][0],r=e[c][1],o=e[c][2];for(var l=!0,a=0;a<n.length;a++)(!1&o||s>=o)&&Object.keys(i.O).every(function(e){return i.O[e](n[a])})?n.splice(a--,1):(l=!1,o<s&&(s=o));if(l){e.splice(c--,1);var u=r();void 0!==u&&(t=u)}}return t}o=o||0;for(var c=e.length;c>0&&e[c-1][2]>o;c--)e[c]=e[c-1];e[c]=[n,r,o]},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,{a:t}),t},n=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},i.t=function(e,r){if(1&r&&(e=this(e)),8&r)return e;if("object"==typeof e&&e){if(4&r&&e.__esModule)return e;if(16&r&&"function"==typeof e.then)return e}var o=Object.create(null);i.r(o);var s={};t=t||[null,n({}),n([]),n(n)];for(var l=2&r&&e;("object"==typeof l||"function"==typeof l)&&!~t.indexOf(l);l=n(l))Object.getOwnPropertyNames(l).forEach(function(t){s[t]=function(){return e[t]}});return s.default=function(){return e},i.d(o,s),o},i.d=function(e,t){for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.e=function(){return Promise.resolve()},i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.j=2310,function(){var e={2310:0};i.O.j=function(t){return 0===e[t]};var t=function(t,n){var r,o,s=n[0],l=n[1],a=n[2],u=0;if(s.some(function(t){return 0!==e[t]})){for(r in l)i.o(l,r)&&(i.m[r]=l[r]);if(a)var c=a(i)}for(t&&t(n);u<s.length;u++)o=s[u],i.o(e,o)&&e[o]&&e[o][0](),e[o]=0;return i.O(c)},n=self.webpackJsonpSLDS___internal_chunked_docs=self.webpackJsonpSLDS___internal_chunked_docs||[];n.forEach(t.bind(null,0)),n.push=t.bind(null,n.push.bind(n))}(),i.nc=void 0;var s=i.O(void 0,[3540],function(){return i(6186)});s=i.O(s),(SLDS=void 0===SLDS?{}:SLDS)["__internal/chunked/docs/./ui/components/timepicker/docs.mdx.js"]=s}();