"use strict";(self.webpackChunk_grafana_ui=self.webpackChunk_grafana_ui||[]).push([[9190],{"../../node_modules/@mdx-js/react/lib/index.js":function(L,m,l){l.d(m,{BN:function(){return a},RP:function(){return f},gz:function(){return i},xA:function(){return p}});var r=l("../../node_modules/react/index.js");const a=r.createContext({});function i(s){return u;function u(v){const g=f(v.components);return r.createElement(s,{...v,allComponents:g})}}function f(s){const u=r.useContext(a);return r.useMemo(()=>typeof s=="function"?s(u):{...u,...s},[u,s])}const h={};function p({components:s,children:u,disableParentContext:v}){let g;return v?g=typeof s=="function"?s({}):s||h:g=f(s),r.createElement(a.Provider,{value:g},u)}},"./src/components/FileDropzone/FileListItem.story.tsx":function(L,m,l){l.r(m),l.d(m,{FileListItem:function(){return e},default:function(){return c}});var r=l("../../node_modules/react/index.js"),a=l("./src/components/FileDropzone/FileListItem.tsx"),i=l("../../node_modules/react/jsx-runtime.js"),f=l("../../node_modules/@mdx-js/react/lib/index.js"),h=l("../../node_modules/@storybook/blocks/dist/index.mjs");function p(t){const n=Object.assign({h1:"h1",p:"p",h3:"h3",pre:"pre",code:"code"},(0,f.RP)(),t.components);return(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(n.h1,{id:"filelistitem",children:"FileListItem"}),`
`,(0,i.jsx)(n.p,{children:"A FileListItem component used for the FileDropzone component to show uploaded files."}),`
`,(0,i.jsx)(n.h3,{id:"usage",children:"Usage"}),`
`,(0,i.jsx)(n.pre,{children:(0,i.jsx)(n.code,{className:"language-jsx",children:`import { FileListItem } from '@grafana/ui';

<FileListItem file={{ file: { name: 'someFile.jpg', size: 12345 } }} />;
`})}),`
`,(0,i.jsx)(n.h3,{id:"props",children:"Props"}),`
`,(0,i.jsx)(h.ov,{of:a.I})]})}function s(t={}){const{wrapper:n}=Object.assign({},(0,f.RP)(),t.components);return n?(0,i.jsx)(n,Object.assign({},t,{children:(0,i.jsx)(p,t)})):p(t)}var u=s,v=Object.defineProperty,g=Object.defineProperties,b=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,y=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable,E=(t,n,d)=>n in t?v(t,n,{enumerable:!0,configurable:!0,writable:!0,value:d}):t[n]=d,x=(t,n)=>{for(var d in n||(n={}))y.call(n,d)&&E(t,d,n[d]);if(o)for(var d of o(n))_.call(n,d)&&E(t,d,n[d]);return t},D=(t,n)=>g(t,b(n)),C,P,I;const j={title:"Forms/FileListItem",component:a.I,parameters:{docs:{page:u}},argTypes:{abortUpload:{action:"abortUpload"},retryUpload:{action:"retryUpload"},removeFile:{action:"removeFile"}},args:{file:{file:{name:"some-file.jpg",size:123456},id:"1",error:new DOMException("error")}}},e=t=>r.createElement(a.I,x({},t));var c=j;e.parameters=D(x({},e.parameters),{docs:D(x({},(C=e.parameters)==null?void 0:C.docs),{source:x({originalSource:`args => {
  return <FileListItemComponent {...args} />;
}`},(I=(P=e.parameters)==null?void 0:P.docs)==null?void 0:I.source)})})},"../grafana-data/src/utils/deprecationWarning.ts":function(L,m,l){l.d(m,{l:function(){return a}});const r={},a=(i,f,h)=>{let p=`[Deprecation warning] ${i}: ${f} is deprecated`;h&&(p+=`. Use ${h} instead`);const s=Date.now(),u=r[p];(!u||s-u>1e4)&&(console.warn(p),r[p]=s)}},"./src/components/FileDropzone/FileListItem.tsx":function(L,m,l){l.d(m,{I:function(){return g}});var r=l("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),a=l("../../node_modules/react/index.js"),i=l("../grafana-data/src/valueFormats/valueFormats.ts"),f=l("./src/themes/ThemeContext.tsx"),h=l("./src/utils/file.ts"),p=l("./src/components/Button/Button.tsx"),s=l("./src/components/Icon/Icon.tsx"),u=l("./src/components/IconButton/IconButton.tsx");const v="Remove file";function g({file:o,removeFile:y}){const _=(0,f.of)(b),{file:E,progress:x,error:D,abortUpload:C,retryUpload:P}=o,I=()=>D?a.createElement(a.Fragment,null,a.createElement("span",{className:_.error},D.message),P&&a.createElement(u.K,{name:"sync",tooltip:"Retry",tooltipPlacement:"top",onClick:P}),y&&a.createElement(u.K,{className:P?_.marginLeft:"",name:"trash-alt",onClick:()=>y(o),tooltip:v})):x&&E.size>x?a.createElement(a.Fragment,null,a.createElement("progress",{className:_.progressBar,max:E.size,value:x}),a.createElement("span",{className:_.paddingLeft},Math.round(x/E.size*100),"%"),C&&a.createElement(p.$n,{variant:"secondary",type:"button",fill:"text",onClick:C},"Cancel upload")):y&&a.createElement(u.K,{name:"trash-alt",onClick:()=>y(o),tooltip:v,tooltipPlacement:"top"}),j=(0,i.j_)("decbytes")(E.size);return a.createElement("div",{className:_.fileListContainer},a.createElement("span",{className:_.fileNameWrapper},a.createElement(s.I,{name:"file-blank",size:"lg","aria-hidden":!0}),a.createElement("span",{className:_.padding},(0,h.i)(E.name)),a.createElement("span",null,(0,i.cN)(j))),a.createElement("div",{className:_.fileNameWrapper},I()))}function b(o){return{fileListContainer:(0,r.AH)({width:"100%",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:o.spacing(2),border:`1px dashed ${o.colors.border.medium}`,backgroundColor:`${o.colors.background.secondary}`,marginTop:o.spacing(1)}),fileNameWrapper:(0,r.AH)({display:"flex",flexDirection:"row",alignItems:"center"}),padding:(0,r.AH)({padding:o.spacing(0,1)}),paddingLeft:(0,r.AH)({paddingLeft:o.spacing(2)}),marginLeft:(0,r.AH)({marginLeft:o.spacing(1)}),error:(0,r.AH)({paddingRight:o.spacing(2),color:o.colors.error.text}),progressBar:(0,r.AH)({borderRadius:o.shape.radius.default,height:"4px","::-webkit-progress-bar":{backgroundColor:o.colors.border.weak,borderRadius:o.shape.radius.default},"::-webkit-progress-value":{backgroundColor:o.colors.primary.main,borderRadius:o.shape.radius.default}})}}try{g.displayName="FileListItem",g.__docgenInfo={description:"",displayName:"FileListItem",props:{file:{defaultValue:null,description:"",name:"file",required:!0,type:{name:"DropzoneFile"}},removeFile:{defaultValue:null,description:"",name:"removeFile",required:!1,type:{name:"((file: DropzoneFile) => void)"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/FileDropzone/FileListItem.tsx#FileListItem"]={docgenInfo:g.__docgenInfo,name:"FileListItem",path:"src/components/FileDropzone/FileListItem.tsx#FileListItem"})}catch{}},"./src/components/IconButton/IconButton.tsx":function(L,m,l){l.d(m,{K:function(){return I}});var r=l("../../node_modules/@emotion/css/dist/emotion-css.esm.js"),a=l("../../node_modules/react/index.js"),i=l("../grafana-data/src/utils/deprecationWarning.ts"),f=l("../grafana-data/src/themes/colorManipulator.ts"),h=l("./src/themes/ThemeContext.tsx"),p=l("./src/themes/mixins.ts"),s=l("./src/components/Icon/Icon.tsx"),u=l("./src/components/Icon/utils.ts"),v=l("./src/components/Tooltip/Tooltip.tsx"),g=Object.defineProperty,b=Object.defineProperties,o=Object.getOwnPropertyDescriptors,y=Object.getOwnPropertySymbols,_=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable,x=(e,c,t)=>c in e?g(e,c,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[c]=t,D=(e,c)=>{for(var t in c||(c={}))_.call(c,t)&&x(e,t,c[t]);if(y)for(var t of y(c))E.call(c,t)&&x(e,t,c[t]);return e},C=(e,c)=>b(e,o(c)),P=(e,c)=>{var t={};for(var n in e)_.call(e,n)&&c.indexOf(n)<0&&(t[n]=e[n]);if(e!=null&&y)for(var n of y(e))c.indexOf(n)<0&&E.call(e,n)&&(t[n]=e[n]);return t};const I=a.forwardRef((e,c)=>{const{size:t="md",variant:n="secondary"}=e;let d;t==="xxl"||t==="xxxl"?((0,i.l)("IconButton",'size="xxl" and size="xxxl"','size="xl"'),d="xl"):d=t;const M=(0,h.of)(j,d,n);let B,T;if("tooltip"in e){const{tooltip:O}=e;B=typeof O=="string"?O:void 0}else if("ariaLabel"in e||"aria-label"in e){const{ariaLabel:O,["aria-label"]:w}=e;B=w||O,T=c}if("tooltip"in e){const O=e,{name:w,iconType:R,className:F,tooltip:A,tooltipPlacement:z}=O,S=P(O,["name","iconType","className","tooltip","tooltipPlacement"]);return a.createElement(v.m,{ref:c,content:A,placement:z},a.createElement("button",C(D({},S),{ref:T,"aria-label":B,className:(0,r.cx)(M.button,F),type:"button"}),a.createElement(s.I,{name:w,size:d,className:M.icon,type:R})))}else{const O=e,{name:w,iconType:R,className:F}=O,A=P(O,["name","iconType","className"]);return a.createElement("button",C(D({},A),{ref:T,"aria-label":B,className:(0,r.cx)(M.button,F),type:"button"}),a.createElement(s.I,{name:w,size:d,className:M.icon,type:R}))}});I.displayName="IconButton";const j=(e,c,t)=>{const n=(0,u.cs)(c)+e.spacing.gridSize;let d=e.colors.text.primary;return t==="primary"?d=e.colors.primary.text:t==="destructive"&&(d=e.colors.error.text),{button:(0,r.AH)({zIndex:0,position:"relative",margin:`0 ${e.spacing.x0_5} 0 0`,boxShadow:"none",border:"none",display:"inline-flex",background:"transparent",justifyContent:"center",alignItems:"center",padding:0,color:d,"&[disabled], &:disabled":{cursor:"not-allowed",color:e.colors.action.disabledText,opacity:.65},"&:before":{zIndex:-1,position:"absolute",opacity:0,width:`${n}px`,height:`${n}px`,borderRadius:e.shape.radius.default,content:'""',transitionDuration:"0.2s",transitionTimingFunction:"cubic-bezier(0.4, 0, 0.2, 1)",transitionProperty:"opacity"},"&:focus, &:focus-visible":(0,p.Hi)(e),"&:focus:not(:focus-visible)":(0,p.cr)(e),"&:hover":{"&:before":{backgroundColor:t==="secondary"?e.colors.action.hover:f.X4(d,.12),opacity:1}}}),icon:(0,r.AH)({verticalAlign:"baseline"})}};try{I.displayName="IconButton",I.__docgenInfo={description:"",displayName:"IconButton",props:{tooltip:{defaultValue:null,description:"Tooltip content to display on hover and as the aria-label",name:"tooltip",required:!0,type:{name:"PopoverContent"}},tooltipPlacement:{defaultValue:null,description:"Position of the tooltip",name:"tooltipPlacement",required:!1,type:{name:"enum",value:[{value:'"auto"'},{value:'"bottom"'},{value:'"top"'},{value:'"right"'},{value:'"left"'},{value:'"bottom-start"'},{value:'"bottom-end"'},{value:'"top-start"'},{value:'"top-end"'},{value:'"right-start"'},{value:'"right-end"'},{value:'"left-start"'},{value:'"left-end"'},{value:'"auto-start"'},{value:'"auto-end"'}]}},name:{defaultValue:null,description:"Name of the icon *",name:"name",required:!0,type:{name:"enum",value:[{value:'"play"'},{value:'"google"'},{value:'"microsoft"'},{value:'"github"'},{value:'"gitlab"'},{value:'"okta"'},{value:'"discord"'},{value:'"hipchat"'},{value:'"amazon"'},{value:'"google-hangouts-alt"'},{value:'"pagerduty"'},{value:'"line"'},{value:'"anchor"'},{value:'"adjust-circle"'},{value:'"angle-double-down"'},{value:'"angle-double-right"'},{value:'"angle-double-up"'},{value:'"angle-down"'},{value:'"angle-left"'},{value:'"angle-right"'},{value:'"angle-up"'},{value:'"align-left"'},{value:'"align-right"'},{value:'"application-observability"'},{value:'"apps"'},{value:'"archive-alt"'},{value:'"arrow"'},{value:'"arrow-down"'},{value:'"arrow-from-right"'},{value:'"arrow-left"'},{value:'"arrow-random"'},{value:'"arrow-right"'},{value:'"arrow-to-right"'},{value:'"arrow-up"'},{value:'"arrows-h"'},{value:'"arrows-v"'},{value:'"asserts"'},{value:'"expand-arrows"'},{value:'"at"'},{value:'"ai"'},{value:'"backward"'},{value:'"bars"'},{value:'"bell"'},{value:'"bell-slash"'},{value:'"bolt"'},{value:'"book"'},{value:'"bookmark"'},{value:'"book-open"'},{value:'"brackets-curly"'},{value:'"bug"'},{value:'"building"'},{value:'"calculator-alt"'},{value:'"calendar-alt"'},{value:'"calendar-slash"'},{value:'"camera"'},{value:'"capture"'},{value:'"channel-add"'},{value:'"chart-line"'},{value:'"check"'},{value:'"check-circle"'},{value:'"check-square"'},{value:'"circle"'},{value:'"circle-mono"'},{value:'"clipboard-alt"'},{value:'"clock-nine"'},{value:'"cloud"'},{value:'"cloud-download"'},{value:'"cloud-upload"'},{value:'"code-branch"'},{value:'"cog"'},{value:'"columns"'},{value:'"comment-alt"'},{value:'"comment-alt-message"'},{value:'"comment-alt-share"'},{value:'"comments-alt"'},{value:'"compass"'},{value:'"copy"'},{value:'"corner-down-right-alt"'},{value:'"create-dashboard"'},{value:'"credit-card"'},{value:'"crosshair"'},{value:'"cube"'},{value:'"dashboard"'},{value:'"database"'},{value:'"dice-three"'},{value:'"docker"'},{value:'"document-info"'},{value:'"download-alt"'},{value:'"draggabledots"'},{value:'"edit"'},{value:'"ellipsis-v"'},{value:'"envelope"'},{value:'"exchange-alt"'},{value:'"exclamation-triangle"'},{value:'"exclamation-circle"'},{value:'"external-link-alt"'},{value:'"eye"'},{value:'"eye-slash"'},{value:'"ellipsis-h"'},{value:'"fa fa-spinner"'},{value:'"favorite"'},{value:'"file-alt"'},{value:'"file-blank"'},{value:'"file-copy-alt"'},{value:'"file-download"'},{value:'"file-edit-alt"'},{value:'"file-landscape-alt"'},{value:'"filter"'},{value:'"flip"'},{value:'"folder"'},{value:'"font"'},{value:'"fire"'},{value:'"folder-open"'},{value:'"folder-plus"'},{value:'"folder-upload"'},{value:'"forward"'},{value:'"frontend-observability"'},{value:'"gf-bar-alignment-after"'},{value:'"gf-bar-alignment-before"'},{value:'"gf-bar-alignment-center"'},{value:'"gf-glue"'},{value:'"gf-grid"'},{value:'"gf-interpolation-linear"'},{value:'"gf-interpolation-smooth"'},{value:'"gf-interpolation-step-after"'},{value:'"gf-interpolation-step-before"'},{value:'"gf-landscape"'},{value:'"gf-layout-simple"'},{value:'"gf-logs"'},{value:'"gf-ml"'},{value:'"gf-movepane-left"'},{value:'"gf-movepane-right"'},{value:'"gf-portrait"'},{value:'"gf-service-account"'},{value:'"gf-show-context"'},{value:'"gf-pin"'},{value:'"gf-prometheus"'},{value:'"gf-traces"'},{value:'"globe"'},{value:'"grafana"'},{value:'"graph-bar"'},{value:'"heart"'},{value:'"heart-rate"'},{value:'"heart-break"'},{value:'"history"'},{value:'"history-alt"'},{value:'"home"'},{value:'"home-alt"'},{value:'"horizontal-align-center"'},{value:'"horizontal-align-left"'},{value:'"horizontal-align-right"'},{value:'"hourglass"'},{value:'"import"'},{value:'"info"'},{value:'"info-circle"'},{value:'"k6"'},{value:'"key-skeleton-alt"'},{value:'"keyboard"'},{value:'"layer-group"'},{value:'"layers-alt"'},{value:'"library-panel"'},{value:'"line-alt"'},{value:'"link"'},{value:'"list-ui-alt"'},{value:'"list-ul"'},{value:'"list-ol"'},{value:'"lock"'},{value:'"map-marker"'},{value:'"map-marker-plus"'},{value:'"map-marker-minus"'},{value:'"message"'},{value:'"minus"'},{value:'"minus-circle"'},{value:'"mobile-android"'},{value:'"monitor"'},{value:'"palette"'},{value:'"panel-add"'},{value:'"pathfinder-unite"'},{value:'"pause"'},{value:'"pen"'},{value:'"percentage"'},{value:'"plug"'},{value:'"plus"'},{value:'"plus-circle"'},{value:'"plus-square"'},{value:'"power"'},{value:'"presentation-play"'},{value:'"process"'},{value:'"question-circle"'},{value:'"record-audio"'},{value:'"repeat"'},{value:'"rocket"'},{value:'"ruler-combined"'},{value:'"save"'},{value:'"search"'},{value:'"search-minus"'},{value:'"search-plus"'},{value:'"share-alt"'},{value:'"shield"'},{value:'"shield-exclamation"'},{value:'"signal"'},{value:'"signin"'},{value:'"signout"'},{value:'"sitemap"'},{value:'"slack"'},{value:'"sliders-v-alt"'},{value:'"spinner"'},{value:'"sort-amount-down"'},{value:'"sort-amount-up"'},{value:'"square-shape"'},{value:'"star"'},{value:'"step-backward"'},{value:'"stopwatch"'},{value:'"stopwatch-slash"'},{value:'"sync"'},{value:'"sync-slash"'},{value:'"table"'},{value:'"tag-alt"'},{value:'"telegram-alt"'},{value:'"text-fields"'},{value:'"thumbs-up"'},{value:'"times"'},{value:'"times-circle"'},{value:'"toggle-on"'},{value:'"toggle-off"'},{value:'"trash-alt"'},{value:'"unarchive"'},{value:'"unlock"'},{value:'"upload"'},{value:'"user"'},{value:'"users-alt"'},{value:'"user-arrows"'},{value:'"vertical-align-bottom"'},{value:'"vertical-align-center"'},{value:'"vertical-align-top"'},{value:'"web-section-alt"'},{value:'"wrap-text"'},{value:'"rss"'},{value:'"x"'}]}},size:{defaultValue:null,description:"Icon size - sizes xxl and xxxl are deprecated and when used being decreased to xl",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'"xl"'},{value:'"xxl"'},{value:'"xxxl"'}]}},iconType:{defaultValue:null,description:"Type of the icon - mono or default",name:"iconType",required:!1,type:{name:"enum",value:[{value:'"solid"'},{value:'"default"'},{value:'"mono"'}]}},variant:{defaultValue:null,description:"Variant to change the color of the Icon",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"destructive"'}]}},ariaLabel:{defaultValue:null,description:"@deprecated use aria-label instead",name:"ariaLabel",required:!1,type:{name:"string"}},"aria-label":{defaultValue:null,description:"Text available only for screen readers. No tooltip will be set in this case.",name:"aria-label",required:!0,type:{name:"string"}}}},typeof STORYBOOK_REACT_CLASSES<"u"&&(STORYBOOK_REACT_CLASSES["src/components/IconButton/IconButton.tsx#IconButton"]={docgenInfo:I.__docgenInfo,name:"IconButton",path:"src/components/IconButton/IconButton.tsx#IconButton"})}catch{}},"./src/utils/file.ts":function(L,m,l){l.d(m,{i:function(){return r}});function r(a){const f=a.lastIndexOf("."),h=a.substring(f),p=a.substring(0,f);return p.length<16?a:`${p.substring(0,16)}...${h}`}},"../../node_modules/react/cjs/react-jsx-runtime.production.min.js":function(L,m,l){/**
 * @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 r=l("../../node_modules/react/index.js"),a=Symbol.for("react.element"),i=Symbol.for("react.fragment"),f=Object.prototype.hasOwnProperty,h=r.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};function s(u,v,g){var b,o={},y=null,_=null;g!==void 0&&(y=""+g),v.key!==void 0&&(y=""+v.key),v.ref!==void 0&&(_=v.ref);for(b in v)f.call(v,b)&&!p.hasOwnProperty(b)&&(o[b]=v[b]);if(u&&u.defaultProps)for(b in v=u.defaultProps,v)o[b]===void 0&&(o[b]=v[b]);return{$$typeof:a,type:u,key:y,ref:_,props:o,_owner:h.current}}m.Fragment=i,m.jsx=s,m.jsxs=s},"../../node_modules/react/jsx-runtime.js":function(L,m,l){L.exports=l("../../node_modules/react/cjs/react-jsx-runtime.production.min.js")}}]);
