"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[8983],{"../../node_modules/@mdx-js/react/lib/index.js":function(h,p,e){e.d(p,{BN:function(){return o},RP:function(){return a},gz:function(){return D},xA:function(){return y}});var s=e("../../node_modules/react/index.js");const o=s.createContext({});function D(c){return d;function d(i){const f=a(i.components);return s.createElement(c,{...i,allComponents:f})}}function a(c){const d=s.useContext(o);return s.useMemo(()=>typeof c=="function"?c(d):{...d,...c},[d,c])}const O={};function y({components:c,children:d,disableParentContext:i}){let f;return i?f=typeof c=="function"?c({}):c||O:f=a(c),s.createElement(o.Provider,{value:f},d)}},"./src/components/DateTimePickers/DatePicker/DatePicker.story.tsx":function(h,p,e){e.r(p),e.d(p,{Basic:function(){return v},default:function(){return R}});var s=e("../../node_modules/react/index.js"),o=e("./src/components/Button/Button.tsx"),D=e("./src/components/DateTimePickers/DatePicker/DatePicker.tsx"),a=e("../../node_modules/react/jsx-runtime.js"),O=e("../../node_modules/@mdx-js/react/lib/index.js"),y=e("../../node_modules/@storybook/blocks/dist/index.mjs");function c(n){const r=Object.assign({h1:"h1",p:"p",h3:"h3",pre:"pre",code:"code"},(0,O.RP)(),n.components);return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(r.h1,{id:"datepicker",children:"DatePicker"}),`
`,(0,a.jsx)(r.p,{children:"A component with a calendar view for selecting a date."}),`
`,(0,a.jsx)(r.h3,{id:"usage",children:"Usage"}),`
`,(0,a.jsx)(r.pre,{children:(0,a.jsx)(r.code,{className:"language-tsx",children:`import React, { useState } from 'react';
import { DatePicker, Button } from '@grafana/ui';

const [date, setDate] = useState<Date>(new Date());
const [open, setOpen] = useState(false);

return (
  <>
    <Button onClick={() => setOpen(true)}>Show Calendar</Button>
    <DatePicker isOpen={open} value={date} onChange={(newDate) => setDate(newDate)} onClose={() => setOpen(false)} />
  </>
);
`})}),`
`,(0,a.jsx)(r.h3,{id:"props",children:"Props"}),`
`,(0,a.jsx)(y.ov,{of:D.l})]})}function d(n={}){const{wrapper:r}=Object.assign({},(0,O.RP)(),n.components);return r?(0,a.jsx)(r,Object.assign({},n,{children:(0,a.jsx)(c,n)})):c(n)}var i=d,f=Object.defineProperty,m=Object.defineProperties,P=Object.getOwnPropertyDescriptors,k=Object.getOwnPropertySymbols,C=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable,S=(n,r,_)=>r in n?f(n,r,{enumerable:!0,configurable:!0,writable:!0,value:_}):n[r]=_,t=(n,r)=>{for(var _ in r||(r={}))C.call(r,_)&&S(n,_,r[_]);if(k)for(var _ of k(r))j.call(r,_)&&S(n,_,r[_]);return n},l=(n,r)=>m(n,P(r)),u,E,g;const x={title:"Pickers and Editors/TimePickers/Pickers And Editors/DatePicker",component:D.l,argTypes:{minDate:{control:"date"}},parameters:{docs:{page:i},controls:{exclude:["onChange","onClose","value","isOpen"]}}},v=n=>{const[r,_]=(0,s.useState)(new Date),[T,B]=(0,s.useState)(!1);return n?.minDate!==void 0&&(n.minDate=new Date(n.minDate)),n=l(t({},n),{isOpen:T,value:r,onChange:w=>_(w),onClose:()=>B(!1)}),s.createElement(s.Fragment,null,s.createElement(o.$n,{onClick:()=>B(!0)},"Show Calendar"),s.createElement(D.l,t({},n)))};var R=x;v.parameters=l(t({},v.parameters),{docs:l(t({},(u=v.parameters)==null?void 0:u.docs),{source:t({originalSource:`(args: DatePickerProps) => {
  const [date, setDate] = useState<Date>(new Date());
  const [open, setOpen] = useState(false);
  if (args?.minDate !== undefined) {
    args.minDate = new Date(args.minDate);
  }
  args = {
    ...args,
    isOpen: open,
    value: date,
    onChange: newDate => setDate(newDate),
    onClose: () => setOpen(false)
  };
  return <>
      <Button onClick={() => setOpen(true)}>Show Calendar</Button>
      <DatePicker {...args} />
    </>;
}`},(g=(E=v.parameters)==null?void 0:E.docs)==null?void 0:g.source)})});try{v.displayName="Basic",v.__docgenInfo={description:"",displayName:"Basic",props:{isOpen:{defaultValue:null,description:"",name:"isOpen",required:!1,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(value: Date) => void"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"Date"}},minDate:{defaultValue:null,description:"",name:"minDate",required:!1,type:{name:"Date"}},maxDate:{defaultValue:null,description:"",name:"maxDate",required:!1,type:{name:"Date"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/DateTimePickers/DatePicker/DatePicker.story.tsx#Basic"]={docgenInfo:v.__docgenInfo,name:"Basic",path:"src/components/DateTimePickers/DatePicker/DatePicker.story.tsx#Basic"})}catch{}},"./src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx":function(h,p,e){e.d(p,{N:function(){return o}});var s=e("../../node_modules/react/index.js");class o extends s.PureComponent{constructor(){super(...arguments),this.myRef=(0,s.createRef)(),this.state={hasEventListener:!1},this.onOutsideClick=a=>{const O=this.myRef.current;(!O||a.target instanceof Node&&!O.contains(a.target))&&this.props.onClick()}}componentDidMount(){this.props.parent.addEventListener("click",this.onOutsideClick,this.props.useCapture),this.props.includeButtonPress&&this.props.parent.addEventListener("keyup",this.onOutsideClick,this.props.useCapture)}componentWillUnmount(){this.props.parent.removeEventListener("click",this.onOutsideClick,this.props.useCapture),this.props.includeButtonPress&&this.props.parent.removeEventListener("keyup",this.onOutsideClick,this.props.useCapture)}render(){return s.createElement("div",{ref:this.myRef},this.props.children)}}o.defaultProps={includeButtonPress:!0,parent:typeof window<"u"?window:void 0,useCapture:!1};try{o.displayName="ClickOutsideWrapper",o.__docgenInfo={description:"",displayName:"ClickOutsideWrapper",props:{onClick:{defaultValue:null,description:"Callback to trigger when clicking outside of current element occurs.",name:"onClick",required:!0,type:{name:"() => void"}},includeButtonPress:{defaultValue:{value:"true"},description:"Runs the 'onClick' function when pressing a key outside of the current element. Defaults to true.",name:"includeButtonPress",required:!1,type:{name:"boolean"}},parent:{defaultValue:{value:"typeof window !== 'undefined' ? window : undefined"},description:"Object to attach the click event listener to.",name:"parent",required:!1,type:{name:"Document | Window"}},useCapture:{defaultValue:{value:"false"},description:"https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener. Defaults to false.",name:"useCapture",required:!1,type:{name:"boolean"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx#ClickOutsideWrapper"]={docgenInfo:o.__docgenInfo,name:"ClickOutsideWrapper",path:"src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx#ClickOutsideWrapper"})}catch{}},"./src/components/DateTimePickers/DatePicker/DatePicker.tsx":function(h,p,e){e.d(p,{l:function(){return C}});var s=e("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),o=e("../../node_modules/react/index.js"),D=e("../../node_modules/react-calendar/dist/esm/index.js"),a=e("./src/themes/ThemeContext.tsx"),O=e("./src/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx"),y=e("./src/components/Icon/Icon.tsx"),c=e("./src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx"),d=Object.defineProperty,i=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,m=Object.prototype.propertyIsEnumerable,P=(t,l,u)=>l in t?d(t,l,{enumerable:!0,configurable:!0,writable:!0,value:u}):t[l]=u,k=(t,l)=>{for(var u in l||(l={}))f.call(l,u)&&P(t,u,l[u]);if(i)for(var u of i(l))m.call(l,u)&&P(t,u,l[u]);return t};const C=(0,o.memo)(t=>{const l=(0,a.of)(S),{isOpen:u,onClose:E}=t;return u?o.createElement(O.N,{useCapture:!0,includeButtonPress:!1,onClick:E},o.createElement("div",{className:l.modal,"data-testid":"date-picker"},o.createElement(j,k({},t)))):null});C.displayName="DatePicker";const j=(0,o.memo)(({value:t,minDate:l,maxDate:u,onChange:E})=>{const g=(0,a.of)(c.h2);return o.createElement(D.Ay,{className:g.body,tileClassName:g.title,value:t||new Date,minDate:l,maxDate:u,nextLabel:o.createElement(y.I,{name:"angle-right"}),prevLabel:o.createElement(y.I,{name:"angle-left"}),onChange:x=>{x&&!Array.isArray(x)&&E(x)},locale:"en"})});j.displayName="Body";const S=t=>({modal:(0,s.AH)({zIndex:t.zIndex.modal,position:"absolute",boxShadow:t.shadows.z3,backgroundColor:t.colors.background.primary,border:`1px solid ${t.colors.border.weak}`,borderTopLeftRadius:t.shape.radius.default,borderBottomLeftRadius:t.shape.radius.default,"button:disabled":{color:t.colors.text.disabled}})});try{C.displayName="DatePicker",C.__docgenInfo={description:"",displayName:"DatePicker",props:{isOpen:{defaultValue:null,description:"",name:"isOpen",required:!1,type:{name:"boolean"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"() => void"}},onChange:{defaultValue:null,description:"",name:"onChange",required:!0,type:{name:"(value: Date) => void"}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"Date"}},minDate:{defaultValue:null,description:"",name:"minDate",required:!1,type:{name:"Date"}},maxDate:{defaultValue:null,description:"",name:"maxDate",required:!1,type:{name:"Date"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/DateTimePickers/DatePicker/DatePicker.tsx#DatePicker"]={docgenInfo:C.__docgenInfo,name:"DatePicker",path:"src/components/DateTimePickers/DatePicker/DatePicker.tsx#DatePicker"})}catch{}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(h,p,e){/**
 * @license React
 * react-jsx-runtime.production.min.js
 *
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */var s=e("../../node_modules/react/index.js"),o=Symbol.for("react.element"),D=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,O=s.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,y={key:!0,ref:!0,__self:!0,__source:!0};function c(d,i,f){var m,P={},k=null,C=null;f!==void 0&&(k=""+f),i.key!==void 0&&(k=""+i.key),i.ref!==void 0&&(C=i.ref);for(m in i)a.call(i,m)&&!y.hasOwnProperty(m)&&(P[m]=i[m]);if(d&&d.defaultProps)for(m in i=d.defaultProps,i)P[m]===void 0&&(P[m]=i[m]);return{$$typeof:o,type:d,key:k,ref:C,props:P,_owner:O.current}}p.Fragment=D,p.jsx=c,p.jsxs=c},"../../node_modules/react/jsx-runtime.js":function(h,p,e){h.exports=e("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
