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