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

BulkActions

Theming