var Component=(()=>{var d=Object.create;var s=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var p=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var f=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),x=(e,n)=>{for(var o in n)s(e,o,{get:n[o],enumerable:!0})},r=(e,n,o,c)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of m(n))!B.call(e,i)&&i!==o&&s(e,i,{get:()=>n[i],enumerable:!(c=h(n,i))||c.enumerable});return e};var g=(e,n,o)=>(o=e!=null?d(p(e)):{},r(n||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),k=e=>r(s({},"__esModule",{value:!0}),e);var a=f((I,l)=>{l.exports=_jsx_runtime});var S={};x(S,{default:()=>b,frontmatter:()=>A});var t=g(a()),A={id:"bulk-actions",title:"BulkActions",description:"A set of actions to perform on one or more selected items."};function u(e){let n=Object.assign({h2:"h2",ul:"ul",li:"li",code:"code",pre:"pre",p:"p",h3:"h3"},e.components),{ComponentLinks:o}=n;return o||w("ComponentLinks",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(o,{pro:{gumroad:!0}}),` `,(0,t.jsx)(n.h2,{id:"import",children:"Import"}),` `,(0,t.jsxs)(n.ul,{children:[` `,(0,t.jsxs)(n.li,{children:[(0,t.jsx)(n.code,{children:"BulkActions"}),": The container component, manages state and composition."]}),` `]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-ts",children:`import { BulkActions } from '@saas-ui-pro/react' `})}),` `,(0,t.jsx)(n.h2,{id:"usage",children:"Usage"}),` `,(0,t.jsxs)(n.p,{children:["BulkActions will be visible when there are one or more ",(0,t.jsx)(n.code,{children:"selections"}),`. The BulkActions component is best used in combination with DataGrid.`]}),` `,(0,t.jsx)(n.h3,{id:"basic",children:"Basic"}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",overflow:"auto",height:"140px",children:` `})}),` `,(0,t.jsx)(n.h3,{id:"customize-title",children:"Customize title"}),` `,(0,t.jsx)(n.p,{children:"The title can be customized for localization or specifying what is selected."}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",overflow:"auto",height:"140px",children:` `})}),` `,(0,t.jsx)(n.h3,{id:"multiple-actions",children:"Multiple actions"}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",overflow:"auto",height:"140px",children:`import { Button, Icon, Menu, MenuButton, MenuList, MenuItem, Portal, } from '@chakra-ui/react' import { BulkActions } from '@saas-ui-pro/react' import { FiArchive, FiTrash } from 'react-icons/fi' export default function MultipleActions() { return ( }> Move to Inbox Spam ) } `})}),` `,(0,t.jsx)(n.h3,{id:"position--transtion",children:"Position & transtion"}),` `,(0,t.jsxs)(n.p,{children:["You can change the transition animation using ",(0,t.jsx)(n.code,{children:"motionPreset"}),", supported presets are ",(0,t.jsx)(n.code,{children:"slideOutTop"}),", ",(0,t.jsx)(n.code,{children:"slideOutBottom"}),", ",(0,t.jsx)(n.code,{children:"fade"}),", ",(0,t.jsx)(n.code,{children:"scale"}),", ",(0,t.jsx)(n.code,{children:"none"}),"."]}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",height:"140px",children:`import { Box, Button } from '@chakra-ui/react' import { BulkActions } from '@saas-ui-pro/react' export default function Position() { const [state, setState] = useState(['1']) return ( <> ) } `})}),` `,(0,t.jsx)(n.h3,{id:"custom-styles",children:"Custom styles"}),` `,(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",overflow:"hidden",height:"140px",children:`import { Box, Button } from '@chakra-ui/react' import { BulkActions } from '@saas-ui-pro/react' export default function CustomStyles() { const [state, setState] = useState(['1']) return ( <> ) } `})})]})}function M(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,Object.assign({},e,{children:(0,t.jsx)(u,e)})):u(e)}var b=M;function w(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return k(S);})(); ;return Component;