retro-react
Version:
A React component library for building retro-style websites
2 lines (1 loc) • 1.07 kB
JavaScript
;var e=require("../../_virtual/_tslib.js"),r=require("react"),t=require("../../node_modules/@theme-ui/core/jsx-runtime/dist/theme-ui-core-jsx-runtime.esm.js"),s=require("../../utils/classNames.js"),n=require("../../constants/commonClassNames.js"),u=require("../button/Button.js"),o=require("./ButtonGroup.styled.js");const i=r.forwardRef(((i,c)=>{var{id:a,className:l,children:m,size:d="medium",sx:f}=i,h=e.__rest(i,["id","className","children","size","sx"]);const j=r.useRef([]);return t.jsx(o.GroupContainer,Object.assign({ref:c,id:a,onKeyDown:e=>{const r=j.current.findIndex((r=>r===e.target));if("ArrowRight"===e.key){const e=(r+1)%j.current.length,t=j.current[e];t&&t.focus()}else if("ArrowLeft"===e.key){const e=(r-1+j.current.length)%j.current.length,t=j.current[e];t&&t.focus()}},className:s.classNames("button-group-root",l,n.default),sx:f},h,{children:r.Children.map(m,((e,t)=>r.isValidElement(e)&&e.type===u.Button?r.cloneElement(e,{isButtonGroup:!0,size:d,ref:e=>{j.current[t]=e}}):e))}),void 0)}));i.displayName="ButtonGroup",exports.ButtonGroup=i;