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

Salesforce Lightning Design System

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