var Component=(()=>{var h=Object.create;var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var B=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var x=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),g=(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 p(n))!f.call(e,i)&&i!==o&&s(e,i,{get:()=>n[i],enumerable:!(c=m(n,i))||c.enumerable});return e};var k=(e,n,o)=>(o=e!=null?h(B(e)):{},r(n||!e||!e.__esModule?s(o,"default",{value:e,enumerable:!0}):o,e)),A=e=>r(s({},"__esModule",{value:!0}),e);var a=x((I,l)=>{l.exports=_jsx_runtime});var b={};g(b,{default:()=>d,frontmatter:()=>M});var t=k(a()),M={id:"bulk-actions",title:"BulkActions",description:"A set of actions to perform on one or more selected items."};function u(e){let n={code:"code",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",ul:"ul",...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 d(e={}){let{wrapper:n}=e.components||{};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(u,{...e})}):u(e)}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 A(b);})(); ;return Component;